如何使用jQuery将行添加到表中？
您好我正在尝试使用jQuery将一行添加到表，但它不工作。 可能是什么原因？
而且，我可以在新添加的行中添加一些值吗？
这里是代码：
<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> 我假设你想将这一行添加到<tbody>元素，并且简单地在<table>上使用append()会将<tr>插入<tbody> ，这可能会导致不良结果。
$('a').click(function() { $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); });
编辑：这是完整的源代码，它确实工作：（注意$(document).ready(function(){});这是以前不存在。
<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>
以下代码工作
<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>
请注意，即使表中包含一个<tbody>元素，它仍然可以使用jQuery 1.4 ：
从版本1.4（？）jQuery自动检测你试图插入的元素（使用任何append（），prepend（），before（）或after（）方法）是一个
<tr>并将其插入到第一个<tbody>放在你的表中，如果不存在的话，将它包装成一个新的<tbody>。
也许这是你正在寻找的答案。 它find<tr />的最后一个实例并在它后面添加新的行：
<script type="text/javascript"> $('a').click(function() { $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>'); }); </script>
我总是使用下面的代码更具可读性
$('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(''));
或者如果有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(''));
你应该附加到表格而不是行。
<script type="text/javascript"> $('a').click(function() { $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>'); }); </script>
尝试：
$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");
而在partial ，你应该有：
<td>row1</td> <td>row2</td>
