Jak dodać wiersze do tabeli za pomocą jQuery?

Witam Próbowałem dodać wiersz do tabeli przy użyciu jQuery, ale to nie działa.
Jaki może być tego powód?Jak dodać wiersze do tabeli za pomocą jQuery?

Czy mogę dodać jakąś wartość do nowo dodanego wiersza ..?

Oto kod:

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $('a').click(function() { 
      $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>'); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <a href="">Link</a> 
    <table id="myTable"> 
     <tbody> 
      <tr> 
       <td> 
        test 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Źródło

2010-01-29 Amit

Poniższy kod działa

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function AddRow() 
{ 
    $('#myTable').append('<tr><td>test 2</td></tr>') 
} 
</script> 
<title></title> 
</head> 
<body> 
<input type="button" id="btnAdd" onclick="AddRow()"/> 
<a href="">test</a> 
<table id="myTable"> 
    <tbody > 
    <tr> 
     <td> 
     test 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Uwaga this will work as of jQuery 1.4 nawet jeśli tabela zawiera <tbody> elementu: (?)

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

Źródło

2010-01-29 10:17:14 Amit

i następne mogą być również używane var value1 = 1; $ ('# mojatabela'). Dodawał (' '+ Value1 +'') – Amit

Należy dołączyć do stołu, a nie rzędach.

<script type="text/javascript"> 
$('a').click(function() { 
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>'); 
}); 
</script>

Źródło

2010-01-29 09:16:54 rsilva4

I wypróbowałem powyższe, ale nie działało .. :( – Amit

OK, robisz coś innego nie tak, sprawdź tutaj (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) swój własny kod z moim rozwiązaniem jonowe lub dominujące rozwiązanie, które można zobaczyć. – rsilva4

Jestem zakładając chcesz dodać ten wiersz do elementu <tbody>, i po prostu za pomocą append() na <table> będzie wstawić <tr> poza <tbody>, ze może niepożądanych rezultatów.

$('a').click(function() { 
    $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
});

EDIT: Oto pełny kod źródłowy, a robi rzeczywiście praca. (Uwaga $(document).ready(function(){});, który nie był obecny przed

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('a').click(function() { 
     $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
    }); 
}); 
</script> 
<title></title> 
</head> 
<body> 
<a href="javascript:void(0);">Link</a> 
<table id="myTable"> 
    <tbody> 
    <tr> 
     <td>test</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Źródło

2010-01-29 09:19:06

Z mojego doświadczenia wynika, że nie można modyfikować zawartości html tabeli. Spróbuj użyć document.createElement ("tr") i document.appendElement() – mrwayne

Zmodyfikowałem twoje źródło, aby działało poprawnie.(Zwróć uwagę na powyższą edycję) Nie zauważyłem tego wcześniej, ale nie zawierałeś '$ (document) .ready()', co zasadniczo zepsuje wszystko. Jeśli nie zaczekasz na uruchomienie zdarzenia 'ready()', DOM nie zostanie załadowany, a twój selektor jQuery prawdopodobnie nie znajdzie tego, czego szuka. –

Nie zapomnij dodać "tbody" jako show w źródłowym przykładzie. –

Spróbuj:

$("#myTable").append("<tr><%= escape_javascript(render :partial => name_of_partial) %></tr>");

A w partial, trzeba mieć:

<td>row1</td> 
<td>row2</td>

Źródło

2010-01-29 12:25:13

Może to jest odpowiedź szukasz. Okazuje ostatnią instancję <tr /> i dołącza nowy wiersz po nim:

<script type="text/javascript"> 
    $('a').click(function() { 
     $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>'); 
    }); 
</script>

Źródło

2013-06-28 08:59:25

zawsze używam tego kodu poniżej dla bardziej czytelnej

$('table').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

lub jeśli mają tbody

$('table').find('tbody').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

Źródło

2017-02-06 08:41:43

można to zrobić w waniliowym Js? – PirateApp

Jak dodać wiersze do tabeli za pomocą jQuery?

Odpowiedz

Powiązane problemy