javascript - tbody - jquery table row




Fügen Sie in jQuery eine Tabellenzeile hinzu (20)

Auf einfache Weise:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Was ist die beste Methode in jQuery, um eine Tabelle als letzte Zeile hinzuzufügen?

Ist das akzeptabel?

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

Gibt es Einschränkungen für das, was Sie zu einer solchen Tabelle hinzufügen können (wie Eingaben, Auswahlmöglichkeiten, Anzahl der Zeilen)?


Da ich auch eine Möglichkeit habe, endlich eine Zeile oder einen bestimmten Ort hinzuzufügen, sollte ich auch folgendes teilen:

Zuerst die Länge oder die Reihen herausfinden:

var r=$("#content_table").length;

und fügen Sie dann die folgende Zeile hinzu:

$("#table_id").eq(r-1).after(row_html);

Der von Ihnen vorgeschlagene Ansatz kann nicht garantiert das tbody Ergebnis liefern. Was wäre, wenn Sie beispielsweise einen tbody :

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Sie würden mit dem folgenden enden:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Ich würde daher stattdessen diesen Ansatz empfehlen:

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

Sie können alles in die after() -Methode einschließen, solange es gültiges HTML ist, einschließlich mehrerer Zeilen wie im obigen Beispiel.

Update: Diese Antwort erneut lesen, nachdem diese Frage kürzlich ausgeführt wurde. Augenlidlosigkeit macht einen guten Kommentar, dass es immer eine tbody im DOM geben wird; das ist wahr, aber nur wenn es mindestens eine Zeile gibt. Wenn Sie keine Zeilen haben, gibt es keinen tbody sei denn, Sie haben selbst eine festgelegt.

DaRKoN_ suggests , an den tbody anstatt nach dem letzten tbody Inhalt hinzuzufügen. Dies umgeht das Problem, keine Zeilen zu haben, ist aber trotzdem nicht kugelsicher, da theoretisch mehrere tbody Elemente vorhanden sein tbody und die Zeile zu jedem von ihnen hinzugefügt würde.

Ich bin mir nicht sicher, ob es eine einzige einzeilige Lösung gibt, die jedes mögliche Szenario berücksichtigt. Sie müssen sicherstellen, dass der jQuery-Code mit Ihrer Markierung übereinstimmt.

Ich denke, die sicherste Lösung besteht wahrscheinlich darin, sicherzustellen, dass Ihre table immer mindestens eine tbody in Ihrem Markup enthält, auch wenn sie keine Zeilen enthält. Auf dieser Basis können Sie Folgendes verwenden, das in den tbody Zeilen, die Sie haben, funktioniert (und auch mehrere tbody Elemente berücksichtigt):

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

Die Dinge haben sich also verändert, seit @Luke Bennett diese Frage beantwortet hat. Hier ist ein Update.

jQuery seit Version 1.4 (?) erkennt automatisch, ob das Element, das Sie einfügen möchten (mit einer der Methoden append() , prepend() , before() oder after() ), ein <tr> und fügt es in die Zuerst <tbody> in Ihrer Tabelle oder <tbody> es in einen neuen <tbody> falls einer nicht vorhanden ist.

Ja, Ihr Beispielcode ist akzeptabel und funktioniert gut mit jQuery 1.4+. ;)

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

Hier ist ein Hacketi-Hack-Code. Ich wollte eine Zeilenvorlage in einer HTML Seite beibehalten. Tabellenzeilen 0 ... n werden zur Anforderungszeit gerendert, und dieses Beispiel hat eine hartcodierte Zeile und eine vereinfachte Vorlagenzeile. Die Vorlagentabelle ist ausgeblendet, und das Zeilen-Tag muss sich in einer gültigen Tabelle befinden. Andernfalls kann es vom Browser aus der DOM gelöscht werden. Beim Hinzufügen einer Zeile wird der Zähler + 1-Bezeichner verwendet. Der aktuelle Wert wird im Datenattribut beibehalten. Es garantiert, dass jede Zeile eindeutige URL Parameter erhält.

Ich habe Tests mit Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (mit Symbian 3), Android und Firefox Beta-Browsern durchgeführt.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: Ich gebe dem jQuery-Team alle Credits. Sie verdienen alles. JavaScript-Programmierung ohne jQuery - Ich möchte nicht einmal über diesen Alptraum nachdenken.


Ich denke, ich habe in meinem Projekt getan, hier ist es:

html

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

Ich habe es so gelöst, was meiner Meinung nach am lesbarsten ist :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

Ich hatte einige verwandte Probleme und versuchte, nach der angeklickten Zeile eine Tabellenzeile einzufügen. Alles ist in Ordnung, außer dass der Aufruf von .after () für die letzte Zeile nicht funktioniert.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Ich bekam eine sehr unordentliche Lösung:

Erstellen Sie die Tabelle wie folgt (ID für jede Zeile):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

usw ...

und dann :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Ich weiß, Sie haben nach einer jQuery-Methode gefragt. Ich habe viel gesucht und finde, dass wir dies besser tun können, als JavaScript direkt mit der folgenden Funktion zu verwenden.

tableObject.insertRow(index)

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

Dieser Parameter ist in Firefox und Opera erforderlich, in Internet Explorer, Chrome und Safari jedoch optional.

Wenn dieser Parameter nicht angegeben wird, insertRow() eine neue Zeile an der letzten Position in Internet Explorer und an der ersten Position in Chrome und Safari ein.

Es funktioniert für jede akzeptable Struktur der HTML-Tabelle.

Das folgende Beispiel fügt eine Zeile in last 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.


Meine Lösung:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

Verwendungszweck:

$('#Table').addNewRow(id1);

Sie können diese großartige jQuery- Funktion zum Hinzufügen von Tabellenzeilen verwenden. Es funktioniert gut mit Tischen, die <tbody> und die nicht. Es berücksichtigt auch das Colspan Ihrer letzten Tabellenzeile.

Hier ist ein Beispiel für eine Verwendung:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Um ein gutes Beispiel zu dem Thema hinzuzufügen, gibt es eine funktionierende Lösung, wenn Sie eine Zeile an einer bestimmten Position hinzufügen müssen.

Die zusätzliche Zeile wird nach der 5. Zeile oder am Ende der Tabelle hinzugefügt, wenn weniger als 5 Zeilen vorhanden sind.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

Ich stelle den Inhalt in einen fertigen (versteckten) Container unter der Tabelle. Wenn Sie (oder der Designer) ändern müssen, ist es nicht erforderlich, den JS zu bearbeiten.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

Wenn Sie das datatable JQuery-Plugin verwenden, können Sie es versuchen.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Siehe Datatables-API für fnAddData- Datatables


Wenn Sie eine andere Variable haben, können Sie im <td> -Tag auf diesen Versuch zugreifen.

Auf diese Weise hoffe ich, dass es hilfreich wäre

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

ich empfehle

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

im Gegensatz zu

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

Das first und das last Schlüsselwort gelten für das erste oder das letzte zu startende Tag, nicht für das Schließen. Daher ist dies bei verschachtelten Tabellen besser, wenn Sie nicht möchten, dass die verschachtelte Tabelle geändert wird, sondern 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>

jQuery verfügt über eine integrierte Funktion zur sofortigen Bearbeitung von DOM-Elementen.

Sie können so etwas zu Ihrem Tisch hinzufügen:

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

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

Dies ist eine ziemlich seltsame Einrückung, aber es ist einfacher für Sie zu sehen, was in diesem Beispiel vor sich geht.


Neils Antwort ist bei weitem die beste. Allerdings werden die Dinge sehr schnell chaotisch. Mein Vorschlag wäre, Variablen zu verwenden, um Elemente zu speichern und an die DOM-Hierarchie anzuhängen.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Schreiben Sie mit einer Javascript-Funktion

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Sie können die Fußzeilenvariable zwischenspeichern und den Zugriff auf DOM reduzieren (Hinweis: Möglicherweise empfiehlt es sich, anstelle der Fußzeile eine falsche Zeile zu verwenden).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")






html-table