Wie hängen Sie mit jQuery Zeilen an eine Tabelle an?

Hallo Ich habe versucht, eine Zeile mit jQuery zu einer Tabelle hinzufügen, aber es funktioniert nicht.
Was könnte der Grund sein?Wie hängen Sie mit jQuery Zeilen an eine Tabelle an?

Und, kann ich etwas Wert auf die neu hinzugefügte Zeile ..? Hier

ist der Code:

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

Quelle

2010-01-29 Amit

Der folgende Code funktioniert

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

Hinweis this will work as of jQuery 1.4, auch wenn die Tabelle enthält ein <tbody> Element: (?)

jQuery seit Version 1.4 erkennt automatisch, wenn das Element, das Sie einfügen wollen (eine der append() verwenden, prepend(), vor() oder nach() Methoden) ist ein <tr> und fügt es in die erste <tbody> in Ihrer Tabelle ein oder wickelt es in eine neue <tbody>, wenn eine nicht existiert.

Quelle

2010-01-29 10:17:14 Amit

und folgende können auch verwendet werden var value1 = 1; $ ('# myTable'). Append ('' + Wert1 + '') – Amit

Sie auf die Tabelle anhängen soll und nicht die Zeilen.

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

Quelle

2010-01-29 09:16:54 rsilva4

Ich habe verwenden versuchte das oben, aber hat nicht funktioniert .. :( – Amit

ok, du machst etwas anderes falsch, überprüfen Sie bitte hier (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) Ihren eigenen Code mit meiner Lösung Ion oder Dominic Lösung werden Sie sehen, dass das funktioniert. – rsilva4

Ich gehe davon aus Sie diese Reihe zum <tbody> Element hinzufügen möchten, und einfach append() auf dem <table> mit den <tr> außerhalb des <tbody>, vielleicht mit unerwünschten Ergebnissen einfügen.

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

EDIT: Dies ist die komplette Quellcode, und es tut tatsächlich funktioniert. (Man beachte die $(document).ready(function(){});, die vorher nicht vorhanden war

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

Quelle

2010-01-29 09:19:06

meiner Erfahrung nach können Sie den HTML-Inhalt einer Tabelle nicht ändern. Versuchen Sie es mit document.createElement ("tr") und document.appendElement() – mrwayne

Ich habe Ihre Quelle so geändert, dass sie korrekt funktioniert.(Beachte den obigen Edit) Ich habe das vorher nicht bemerkt, aber du hattest nicht das '$ (document) .ready()' enthalten, was im Grunde alles kaputt macht. Wenn Sie nicht auf das 'ready()' -Ereignis warten, wird das DOM nicht geladen und Ihr jQuery-Selektor wird wahrscheinlich nicht finden, wonach es sucht. –

Vergessen Sie nicht, "tbody" wie im Quellbeispiel gezeigt mit einzuschließen. –

Versuchen:

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

Und im partial, sollten Sie haben:

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

Quelle

2010-01-29 12:25:13

Vielleicht ist die Antwort, die Sie suchen. Sie findet die letzte Instanz <tr /> und fügt die neue Zeile, nachdem es:

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

Quelle

2013-06-28 08:59:25

ich diesen Code immer unten für mehr lesbar

$('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(''));

oder wenn es 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(''));

Quelle

2017-02-06 08:41:43

Kann dies in Vanille JS getan werden? – PirateApp

Wie hängen Sie mit jQuery Zeilen an eine Tabelle an?

Antwort

Verwandte Themen