jQuery를 사용하여 다른 사람의 HTML을 아름답게 만들기

StackOverflow https://stackoverflow.com/questions/54138

  •  09-06-2019
  •  | 
  •  

문제

표시해야 하는 HTML 기반 보고서를 생성하는 타사 앱이 있습니다.나는 가지고있다 일부 모양을 제어할 수 있지만 일반적으로 매우 원시적입니다.나 ~할 수 있다 그래도 자바 스크립트를 삽입하십시오.나는 그것을 정리하기 위해 jQuery의 장점을 삽입하려고 합니다.내가 하고 싶은 한 가지 구체적인 작업은 항상 하나의 행과 다양한 수의 열을 포함하는 테이블(실제 HTML <table>)을 가져와 마술처럼 탭 보기로 변환하는 것입니다. 필요한 경우 ID를 제공할 수 있습니다) 각 원본 테이블 셀은 탭 보기의 시트를 나타냅니다.나는 좋은 것을 찾지 못했습니다 (읽기:간단한) 이와 같은 re-parenting 항목의 예가 너무 많아서 어디서부터 시작해야 할지 잘 모르겠습니다.누군가 내가 이것을 시도할 수 있는 방법에 대한 힌트를 제공할 수 있습니까?

도움이 되었습니까?

해결책

다음과 같은 HTML 페이지가 있다고 가정해 보겠습니다.

<body><br/>
    <table id="my-table">`<br/>
        <tr><br/>
            <td><div>This is the contents of Column One</div></td><br/>
            <td><div>This is the contents of Column Two</div></td><br/>
            <td><div>This is the contents of Column Three</div></td><br/>
            <td><div>Contents of Column Four blah blah</div></td><br/>
            <td><div>Column Five is here</div></td><br/>
        </tr><br/>
    </table><br/>
</body><br/>

다음 jQuery 코드는 테이블 셀을 탭으로 변환합니다(FF 3 및 IE 7에서 테스트됨).

$(document).ready(function() {
    var tabCounter = 1;
    $("#my-table").after("<div id='tab-container' class='flora'><ul id='tab-list'></ul></div>");
    $("#my-table div").appendTo("#tab-container").each(function() {                    
        var id = "fragment-" + tabCounter;
        $(this).attr("id", id);
        $("#tab-list").append("<li><span><a href='#" + id + "'>Tab " + tabCounter + "</a></span></li>");
        tabCounter++;
    });
    $("#tab-container > ul").tabs();
});

이 작업을 수행하기 위해 다음 jQuery 파일을 참조했습니다.

  • jquery-최신.js
  • ui.core.js
  • ui.tabs.js

그리고 Flora.all.css 스타일시트를 참조했습니다.기본적으로 헤더 섹션을 복사했습니다. jQuery 탭 예

다른 팁

jQuery를 사용하여 이 작업을 수행할 수 있지만 추가 유지 관리가 악몽이 될 수 있습니다.소스가 변경되면 해결 방법도 변경되므로 이/화면 스크래핑을 수행하지 않는 것이 좋습니다.

이것은 확실히 가능한 것 같습니다.jQuery.append와 jQuery.fadeIn 및 fadeOut의 조합을 사용하면 멋진 작은 탭 컨트롤을 만들 수 있습니다.

기반으로 탭 세트를 생성하는 간단한 방법은 JQuery UI/탭을 참조하세요. <ul> 요소와 세트 <div>'s: http://docs.jquery.com/UI/Tabs

또한 추가 스타일시트를 삽입하고 이를 사용하여 보기 흉한 요소를 표시/숨기고 스타일을 지정하는 것이 좋습니다.

태그 사이의 모든 줄 바꿈은 텍스트 노드이고 임의의 미화는 문서 구조와 콘텐츠에 해로울 수 있는 방식으로 텍스트 노드를 생성하고 제거하기 때문에 HTML을 아름답게 만드는 것은 그렇게 간단한 프로세스가 아닙니다.다음과 같은 모든 조건을 이미 고려한 프로그램을 사용하는 것이 좋습니다. http://prettydiff.com/?m=beautify

HTML Tidy처럼 HTML 정리에 관심이 없으시겠지만 정적 HTML 구성 요소의 대화형 향상(예:탭 인터페이스에서 정적 테이블 전환).

여기에 있는 일부 답변은 이미 힌트를 제공했습니다.Jquery Tabs를 사용하고 있지만 답변에서 HTML 재작성 접근 방식이 마음에 들지 않습니다.

IMHO는 다음과 같이 JQuery 선택기를 사용하여 원하는 테이블 셀의 내용을 추출하는 것이 더 좋습니다. 

var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()

그런 다음 프로그래밍 방식으로 탭을 생성하여 이 데이터를 JQuery UI 플러그인에 공급할 수 있습니다.

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top