Hinzufügen einer Tabellenzeile in jQuery

Question 1

Ich verwende jQuery, um einer Tabelle als letzte Zeile eine zusätzliche Zeile hinzuzufügen.

Ich habe es so gemacht:

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Gibt es Einschränkungen für das, was Sie einer solchen Tabelle hinzufügen können (z. B. Eingaben, Auswahlen, Anzahl der Zeilen)? Gibt es einen anderen Weg, es zu tun?

Question 2

jQuery hat eine eingebaute Funktion, um DOM-Elemente im Handumdrehen zu manipulieren.

Sie können Ihrer Tabelle alles wie folgt hinzufügen:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

Das $('<some-tag>') Das Ding in jQuery ist ein Tag-Objekt, das mehrere haben kann attr Attribute, die gesetzt und abgerufen werden können, sowie textdas hier den Text zwischen dem Tag darstellt: <tag>text</tag>.

Dies ist eine ziemlich seltsame Einrückung, aber Sie können leichter erkennen, was in diesem Beispiel vor sich geht.

Question 3

Was wäre, wenn Sie eine hätten <tbody> und ein <tfoot>?

Wie zum Beispiel:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Dann würde es Ihre neue Zeile in die Fußzeile einfügen – nicht in den Körper.

Daher ist die beste Lösung, a einzuschließen <tbody> markieren und verwenden .appendstatt .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Question 4

Ich weiß, dass Sie nach einer jQuery-Methode gefragt haben. Ich habe viel geschaut und festgestellt, dass wir es besser machen können, als JavaScript direkt mit der folgenden Funktion zu verwenden.

tableObject.insertRow(index)

index ist eine Ganzzahl, die die Position der einzufügenden Zeile angibt (beginnt bei 0). Der Wert -1 kann auch verwendet werden; was dazu führt, dass die neue Zeile an letzter Stelle eingefügt wird.

Dieser Parameter ist in Firefox und erforderlich Operaber es ist optional im Internet Explorer, Chrom und Safari.

Wird dieser Parameter weggelassen, insertRow() fügt eine neue Zeile an der letzten Position im Internet Explorer und an der ersten Position in Chrome und Safari ein.

Es funktioniert für jede akzeptable Struktur von HTML-Tabellen.

Das folgende Beispiel fügt eine Zeile zuletzt ein (-1 wird als Index verwendet):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Ich hoffe, es hilft.

Question 5

Ich empfehle

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

im Gegensatz zu

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

Das first und last Schlüsselwörter wirken auf das erste oder letzte zu startende Tag, nicht auf das geschlossene. Daher funktioniert dies besser mit verschachtelten Tabellen, wenn Sie nicht möchten, dass die verschachtelte Tabelle geändert wird, sondern stattdessen zur Gesamttabelle hinzugefügt wird. Zumindest habe ich das gefunden.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>