Dodaj wiersz tabeli w jQuery


2424

Jaka jest najlepsza metoda w jQuery, aby dodać dodatkowy wiersz do tabeli jako ostatni wiersz?

Czy to jest dopuszczalne?

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

Czy istnieją ograniczenia dotyczące tego, co można dodać do takiej tabeli (takie jak dane wejściowe, selekcje, liczba wierszy)?


2
Dzięki Ash. Ja także uczę się jQuery i trudno mi znaleźć najlepszy sposób, szczególnie proste rzeczy. Są to dwa pytania, ponieważ opublikowałem jedno, a prawie godzinę później zdałem sobie sprawę, że powinienem postawić drugie i nie sądziłem, że powinienem zmienić pierwsze.
Darryl Hein


17
Do Twojej wiadomości - Unikaj używania wielu dodatków (ogromnie spowalnia działanie), raczej buduj swój ciąg lub użyj łączenia JavaScript, które jest znacznie szybsze.
Gerrit Brink


Na wypadek, gdyby wiersz był zbyt skomplikowany, robię to, aby ukryć pierwszy wiersz z wymaganą strukturą, utworzyć klon i zmodyfikować tekst i wstawić po pierwszym wierszu, w ten sposób, jeśli pobierzesz dane z odpowiedzi ajax, twoja tabela zostanie utworzona, pamiętaj sklonuj go poza pętlą, a następnie użyj go do zmodyfikowania zawartości w pętli. $ („# mainTable tbody”). append (row); wiersz jest zmodyfikowaną kopią klonu :)
Aadam

Odpowiedzi:


2143

Podejście, które sugerujesz, nie gwarantuje uzyskania oczekiwanego rezultatu - co jeśli tbodyna przykład:

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

Skończyłoby się z następującymi:

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

Dlatego zamiast tego poleciłbym to podejście:

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

W after()metodzie można uwzględnić wszystko, o ile jest to poprawny kod HTML, w tym wiele wierszy zgodnie z powyższym przykładem.

Aktualizacja: ponowne sprawdzenie tej odpowiedzi po ostatniej aktywności związanej z tym pytaniem. brak powiek jest dobrym komentarzem, że zawsze będzie tbodyw DOM; jest to prawda, ale tylko jeśli jest co najmniej jeden wiersz. Jeśli nie masz wierszy, nie będzie, tbodychyba że sam określisz jeden.

DaRKoN_ sugeruje dołączanie do tbodytreści zamiast dodawania treści po ostatnim tr. Rozwiązuje to problem braku wierszy, ale nadal nie jest kuloodporny, ponieważ teoretycznie można mieć wiele tbodyelementów, a wiersz zostanie dodany do każdego z nich.

Biorąc pod uwagę wszystko, nie jestem pewien, czy istnieje jedno jednowierszowe rozwiązanie, które uwzględnia każdy możliwy scenariusz. Musisz upewnić się, że kod jQuery zgadza się ze znacznikami.

Myślę, że najbezpieczniejszym rozwiązaniem jest zapewnienie, aby tablezawsze zawierałeś przynajmniej jeden tbodyze znaczników, nawet jeśli nie ma żadnych wierszy. Na tej podstawie możesz użyć następujących opcji, które będą działać bez względu na liczbę posiadanych wierszy (a także uwzględniać wiele tbodyelementów):

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

6
@Rama, nie, nie będzie. Musi być lepsze rozwiązanie.
Brian Liang

40
W DOM zawsze będzie ktoś.
powiek

4
pusta osoba nie sprawdza poprawności kodu HTML
2ni

40
Niewielkim usprawnieniem w stosunku do ładnego rozwiązania byłoby zoptymalizowanie selektorów. Możesz uzyskać poprawę prędkości dzięki: $('#myTable').find('tbody:last')zamiast $('#myTable > tbody:last').
Erik Töyrä Silfverswärd

2
„brak powiek jest dobrym komentarzem, że zawsze będzie ktoś w DOM” - Właśnie próbowałem tego bez ciała i to nie działało - działa tylko, jeśli jest ktoś.
BrainSlugs83

771

jQuery ma wbudowane narzędzie do manipulowania elementami DOM w locie.

Możesz dodać wszystko do swojego stołu w następujący sposób:

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

$('<some-tag>')Rzeczą w jQuery jest obiekt tag, który może mieć kilka attratrybutów, które można ustawiać i uzyskać, a także text, co stanowi tekst pomiędzy znacznikiem tutaj: <tag>text</tag>.

To trochę dziwne wcięcie, ale łatwiej jest zobaczyć, co się dzieje w tym przykładzie.


60
Dla tych, którzy tego próbują, zwróć uwagę na lokalizację nawiasów. Kluczowe jest prawidłowe zagnieżdżenie.
Ryan Lundy,

9
Co z tagami zamykającymi? Czy nie są konieczne?
senfo

9
Czy $ („# tableClassname”) nie powinno w rzeczywistości być $ („# tableID”), ponieważ symbol skrótu odnosi się do identyfikatora, a nie nazwy klasy?
Dave

7
Nienawidzę takich dziwnych łańcuchów. Utrzymywanie kodu pełnego takich rzeczy to koszmar.
bancer

4
@senfo dodanie elementów potomnych utworzy je automatycznie.
Michel de Ruiter,

308

Więc rzeczy się zmieniły od czasu @Luke Bennett odpowiedział na to pytanie. Oto aktualizacja.

jQuery od wersji 1.4 (?) automatycznie wykrywa, czy element próbujesz wstawić (za pomocą dowolnego z append(), prepend(), before()lub after()metod) jest <tr>i wstawia go do pierwszego <tbody>w tabeli lub zawija je w nowy <tbody>, jeśli nie istnieć.

Więc tak, twój przykładowy kod jest akceptowalny i będzie działał dobrze z jQuery 1.4+. ;)

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

2
Ostrożnie z tym założeniem. Jeśli dołączony znacznik zaczyna się od \ n lub \ n \ r, jQuery nie wykryje, że jest to <tr> i doda go do <table>, a nie do <tbody>. Właśnie zetknąłem się z tym ze znacznikami generowanymi przez widok MVC, który miał na początku dodatkową linię.
Mik

@Mik dzięki za heads-up! Myślę, że yourString.trim()można temu zaradzić.
Salman von Abbas

Oczywiście, ale musisz o tym pomyśleć. Lepiej przyzwyczaj się do dołączania do <tbody>, jeśli wiesz, że istnieje.
Mik

jQuery 3.1 nadal wymaga określenia osoby. Sprawdź to tutaj: jsfiddle.net/umaj5zz9/2
user984003

Powoduje to odświeżenie mojej strony. Jak mogę temu zapobiec?
Avi

168

Co jeśli masz A <tbody>i A <tfoot>?

Jak na przykład:

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

Następnie wstawiłby nowy wiersz w stopce - nie do ciała.

Dlatego najlepszym rozwiązaniem jest dodanie <tbody>tagu i użycie .append, a nie .after.

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

10
Niepoprawnie zaimplementowałeś swoją stopę. Powinien pojawić się przed wszystkimi, a nie później - patrz w3.org/TR/html4/struct/tables.html#h-11.2.3 . Dlatego moje rozwiązanie nadal działa, chyba że zdecydujesz się złamać standardy (w takim przypadku możesz spodziewać się, że inne rzeczy również się nie powiodą). Moje rozwiązanie działa również bez względu na to, czy masz kogoś, czy nie, podczas gdy twoja propozycja zawiedzie, jeśli kogoś nie będzie.
Luke Bennett

6
Pomimo błędów w <tfoot />, jest to lepsze rozwiązanie. Jeśli nie ma <tbody />, możesz użyć tej samej techniki na samym <table />. Natomiast „zaakceptowana odpowiedź” wymaga dodatkowej kontroli, aby sprawdzić, czy istnieje istniejący wiersz. (Wiem, że OP nie określił tego wymagania, ale to nie ma znaczenia - ten post pojawia się na 1. miejscu w wyszukiwarce Google dla tej techniki, a najlepsza odpowiedź nie jest najlepsza.)
CleverPatrick

5
To lepsze rozwiązanie niż znalezienie. W kilku iteracjach ta technika wydaje się zawsze działać. Jako dodatkową informację, możesz użyć .prepend, aby dodać wiersz na początku tabeli, podczas gdy .append umieszcza wiersz na końcu tabeli.
Lance Cleveland

Jest to niepoprawne, spowoduje dołączenie wiersza do każdego wiersza w tbody
garg10may

@ garg10may Czy możesz doradzić jak? Jest skierowany do każdego, nie do żadnego elementu potomnego.
Czad

64

Wiem, że poprosiłeś o metodę jQuery. Szukałem dużo i stwierdziłem, że możemy to zrobić lepiej niż przy użyciu JavaScript bezpośrednio przez następującą funkcję.

tableObject.insertRow(index)

indexjest liczbą całkowitą, która określa pozycję wiersza do wstawienia (zaczyna się od 0). Można również użyć wartości -1; co powoduje, że nowy wiersz zostanie wstawiony w ostatniej pozycji.

Ten parametr jest wymagany w Firefox i Opera , ale jest opcjonalny w Internet Explorer, Chrome i Safari .

Jeśli ten parametr zostanie pominięty, insertRow()wstawia nowy wiersz na ostatniej pozycji w Internet Explorerze i na pierwszej pozycji w Chrome i Safari.

Będzie działać dla każdej akceptowalnej struktury tabeli HTML.

Poniższy przykład wstawi wiersz na końcu (-1 służy jako indeks):

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

Mam nadzieję, że to pomoże.


2
Problem z tą metodą (jak właśnie się dowiedziałem) polega na tym, że jeśli masz stopkę, doda PO stopce z indeksem -1.
kdubs

35

polecam

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

w przeciwieństwie do

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

firstI lastsłowa kluczowe prace na pierwszej lub ostatniej tagu być uruchomiony, nie zamknięta. Dlatego gra się lepiej z tabelami zagnieżdżonymi, jeśli nie chcesz, aby tabela zagnieżdżona była zmieniana, ale zamiast tego dodaj do tabeli ogólnej. Przynajmniej to znalazłem.

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

32

Moim zdaniem najszybszy i wyraźniejszy sposób

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

oto demo Fiddle

Mogę również polecić małą funkcję, aby wprowadzić więcej zmian HTML

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Jeśli używasz mojego kompozytora strun, możesz to zrobić w podobny sposób

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Oto demo Fiddle


Jeśli masz wiele tbody, możesz uzyskać wiele wkładek
Mark Schultheiss,

Tak, możesz :) Możesz spróbować $("SELECTOR").last()ograniczyć kolekcję tagów
najpóźniej

23

Można to łatwo zrobić za pomocą funkcji „last ()” jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

9
Dobry pomysł, ale myślę, że chcesz zmienić selektor na #tableId tr, ponieważ teraz dostaniesz tabelę i dodasz wiersz pod tabelą.
Darryl Hein

17

Używam tego sposobu, gdy nie ma żadnego wiersza w tabeli, a także każdy wiersz jest dość skomplikowany.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

Dziękuję Ci. To bardzo eleganckie rozwiązanie. Podoba mi się, jak utrzymuje szablon w siatce. Dzięki temu kod jest o wiele prostszy i łatwiejszy do odczytania i utrzymania. Dzięki jeszcze raz.
Rodney

14

Aby znaleźć najlepsze rozwiązanie zamieszczone tutaj, jeśli w ostatnim wierszu znajduje się tabela zagnieżdżona, nowy wiersz zostanie dodany do tabeli zagnieżdżonej zamiast tabeli głównej. Szybkie rozwiązanie (biorąc pod uwagę tabele z / bez tbody i tabele z tabelami zagnieżdżonymi):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Przykład użycia:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

14

Rozwiązałem to w ten sposób.

Korzystanie z jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

Skrawek

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>


Mogę teraz z powodzeniem dodawać dynamiczne dane w nowym wierszu, ale po użyciu tej metody mój niestandardowy filtr nie działa .. Czy masz na to jakieś rozwiązanie? Dziękuję
Arjun

Myślę, że musisz wywołać jakąś funkcję aktualizacji. Mam ochotę powiedzieć bez przykładu.
Anton vBR

13

Miałem pewne powiązane problemy, próbując wstawić wiersz tabeli po klikniętym wierszu. Wszystko jest w porządku, z wyjątkiem tego, że wywołanie .after () nie działa dla ostatniego rzędu.

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

Wylądowałem z bardzo niechlujnym rozwiązaniem:

utwórz tabelę w następujący sposób (identyfikator dla każdego wiersza):

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

itp ...

i wtedy :

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

Myślę, że powinno to być nowe pytanie, zamiast odpowiedzi na istniejące ...
Darryl Hein,

11

Możesz użyć tej wspaniałej funkcji dodawania wiersza tabeli jQuery . Działa świetnie z tabelami, które mają, <tbody>a które nie. Uwzględnia również rozpiętość kolorów ostatniego wiersza tabeli.

Oto przykładowe użycie:

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

Nie widzę, żeby to było bardzo przydatne. Wystarczy dodać pusty wiersz tabeli do tabeli. Zazwyczaj, jeśli nie zawsze, chcesz dodać nowy wiersz tabeli z zawartymi w nim danymi.
Darryl Hein

1
Ale zwykle tego chcesz. Ta funkcja pozwala dodać en pusty wiersz do dowolnej tabeli, bez względu na liczbę kolumn i rozpiętość wierszy, dzięki czemu jest to funkcja UNIWERSALNA. Możesz kontynuować stamtąd na przykład za pomocą $ ('. Tbl tr: last td'). Chodzi o to, aby mieć uniwersalną funkcję !!!
Uzbekjon

Jeśli twoja funkcja dodaje również dane do nowych wierszy, nie będziesz mógł ich użyć przy następnym projekcie. O co chodzi?! Moim zdaniem jednak nie musisz się nim dzielić ...
Uzbekjon

Jeśli zaproponujesz funkcję, która nie jest częścią wspólnego pakietu, umieść tutaj pełny kod funkcji. Dziękuję Ci.
Jewgienij Afanasyjew

10

Moje rozwiązanie:

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

stosowanie:

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

co jeśli nie ma tbodyw tabeli ..? oznacza, że ​​wiersz może znajdować się bezpośrednio w <table>elemencie, nawet bez nagłówka.
shashwat

Gorąco polecam, że masz znaczniki <TBody>, więc jest to zgodne ze standardami HTML 5, jeśli nie, to zawsze możesz zrobić $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); który po prostu dołącza wiersz w tabeli.
Ricky G

Myślę, że jeśli masz zamiar uczynić tę funkcję, być może możesz zwrócić obiekt jQuery dla nowego wiersza, aby był łańcuchowy.
Chaos

10
    // 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);

Może to być odpowiedź, ale nie jest zbyt użyteczne dla gościa później ... Dodaj wyjaśnienie wokół swojej odpowiedzi.
Jayan,

9

Odpowiedź Neila jest zdecydowanie najlepsza. Jednak sprawy stają się naprawdę nieuporządkowane. Moją sugestią byłoby użycie zmiennych do przechowywania elementów i dołączenie ich do hierarchii DOM.

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);

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

Pisz za pomocą funkcji javascript

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


7

Oto kod hacketi hacketi. Chciałem zachować szablon wiersza na stronie HTML . Wiersze tabeli 0 ... n są renderowane w czasie żądania, a ten przykład ma jeden wiersz zakodowany na stałe i wiersz uproszczonego szablonu. Tabela szablonów jest ukryta, a znacznik wiersza musi znajdować się w prawidłowej tabeli, w przeciwnym razie przeglądarki mogą upuścić ją z drzewa DOM . Dodanie wiersza używa licznika + 1, a bieżąca wartość jest zachowywana w atrybucie danych. Gwarantuje, że każdy wiersz otrzymuje unikalne parametry adresu URL .

Przeprowadziłem testy na przeglądarkach Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (z Symbian 3), Android i Firefox beta.

<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: Wszystkie kredyty udzielam zespołowi jQuery; zasługują na wszystko. Programowanie JavaScript bez jQuery - nawet nie chcę myśleć o tym koszmarze.


7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

7

Chyba zrobiłem to w moim projekcie, oto on:

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');
    });
      });
});

7

To jest moje rozwiązanie

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

7

jeśli masz inną zmienną, możesz uzyskać dostęp w <td>znaczniku takim jak ta próba.

W ten sposób mam nadzieję, że byłoby to pomocne

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);

6

Ponieważ mam również sposób, aby w końcu dodać wiersz lub dowolne określone miejsce, więc myślę, że powinienem również udostępnić to:

Najpierw sprawdź długość lub rzędy:

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

a następnie użyj poniższego kodu, aby dodać swój wiersz:

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

6

Aby dodać dobry przykład na ten temat, oto działające rozwiązanie, jeśli chcesz dodać wiersz w określonej pozycji.

Dodatkowy wiersz jest dodawany po 5. rzędzie lub na końcu tabeli, jeśli jest mniej niż 5 wierszy.

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);
}

Umieszczam zawartość w gotowym (ukrytym) pojemniku pod tabelą. Więc jeśli ty (lub projektant) musisz zmienić, nie jest wymagana edycja JS.

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

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

Możesz buforować zmienną stopki i ograniczyć dostęp do DOM (uwaga: być może lepiej będzie użyć fałszywego wiersza zamiast stopki).

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

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

doda nowy wiersz do pierwszego TBODY w tabeli, bez względu na dowolny THEADlub TFOOTobecny. (Nie znalazłem informacji, z której wersji jQuery.append() takie zachowanie jest obecne).

Możesz spróbować w tych przykładach:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

W którym przykładzie a bwiersz jest wstawiany po 1 2, a nie 3 4w drugim przykładzie. Jeśli tabela była pusta, jQuery tworzy TBODYnowy wiersz.


5

Jeśli używasz wtyczki JQuery Datatable, możesz spróbować.

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);

Patrz Datatables fnAddData Datatables API


5

W prosty sposób:

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

Czy mógłby Pan uściślić swoją odpowiedź, dodając nieco więcej opisu oferowanego rozwiązania?
abarisone

4

Spróbuj tego: bardzo prosty sposób

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.