Verwenden Sie jQuery, um den HTML-Code einer anderen Person zu verschönern

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

  •  09-06-2019
  •  | 
  •  

Frage

Ich habe eine Drittanbieter-App, die HTML-basierte Berichte erstellt, die ich anzeigen muss.Ich habe manche Kontrolle darüber, wie sie aussehen, aber im Allgemeinen ist es ziemlich primitiv.ICH dürfen Fügen Sie jedoch etwas Javascript ein.Ich würde gerne versuchen, etwas jQuery-Qualität hineinzubringen, um es etwas aufzuräumen.Eine konkrete Sache, die ich tun möchte, ist, eine Tabelle (eine tatsächliche HTML-<Tabelle>), die immer eine Zeile und eine variable Anzahl von Spalten enthält, auf magische Weise in eine Registerkartenansicht umzuwandeln, in der der Inhalt (immer ein <div>) angezeigt wird Bei Bedarf kann ich eine ID angeben) jeder ursprünglichen Tabellenzelle stellt in der Registerkartenansicht ein Blatt dar.Ich habe nichts Gutes gefunden (lesen Sie:einfache) Beispiele für Re-Parenting-Elemente wie dieses, daher bin ich mir nicht sicher, wo ich anfangen soll.Kann mir jemand Tipps geben, wie ich das versuchen könnte?

War es hilfreich?

Lösung

eine HTML-Seite wie folgt gegeben: 

<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/>

der folgende jQuery Code konvertiert die Tabellenzellen in Laschen (getestet in FF 3 und 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();
});

Um dies zu arbeiten ich folgende jQuery-Dateien referenziert

  • jquery-latest.js
  • ui.core.js
  • ui.tabs.js

Und ich referenzierten die flora.all.css Sheet. Grundsätzlich kopierte ich den Header-Abschnitt aus dem jQuery Registerkarte Beispiel

Andere Tipps

Sie können dies mit jQuery tun, aber es kann ein Alptraum zusätzliche Wartung. Ich würde empfehlen, gegen, dies zu tun / Screen Scraping, weil, wenn die Quelle überhaupt um so auch Ihre Arbeit verändert.

Das klingt sicherlich möglich. Mit einer Kombination aus jQuery.append und jQuery.fadeIn und fadeOut sollten Sie in der Lage sein, eine nette kleine tabbed Steuerelement zu erstellen.

Sehen Sie die JQuery UI / Tabs für eine einfache Möglichkeit, eine Gruppe von Tabs auf einem <ul> Elemente und eine Reihe von <div>'s Basis zu erstellen: http://docs.jquery.com/UI/Tabs

Ich würde auch vorschlagen, eine zusätzliche Injektion Sheet und verwendet zum Anzeigen / Verbergen und Stil hässlich Elemente.

Beautifying HTML ist nicht so ein einfacher Prozess, weil jeder Zeilenumbruch zwischen den Tags ein Textknoten ist und willkürlich Verschönerungs erzeugt und Textknoten in Art und Weise entfernt, die auf die Dokumentstruktur schädlich sein könnten und auf die Inhalte, die schädlich. Ich empfehle, mit einem Programm, das alle diese Bedingungen durch bereits gedacht hat, wie zum Beispiel http://prettydiff.com/?m = verschönern

Klingt wie Sie nicht daran interessiert, in einer HTML-Bereinigung sind als HTML Tidy tut, aber in einer interaktiven Verbesserung der statischen HTML-Komponenten (zum Beispiel einer statische Tabelle in einer Oberfläche mit Registerkarten drehen).

Hier einige Antworten bereits geben Ihnen Hinweise, zum Beispiel JQuery Tabs verwenden, aber ich weiß nicht, wie der HTML-Rewrite-Ansatz in ihren Antworten.

IMHO ist es besser, den Inhalt der Tabellenzellen zu extrahieren Sie mit einem JQuery-Selektor möchten, wie: 

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

, dann können Sie diese Daten an das Plugin JQuery UI-Feed von programmatisch auf die Registerkarten erstellen: 

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top