嗨,我试图使用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>
Dom*_*nes 52
我假设您要将此行添加到<tbody>元素中,并且只需使用append()on <table>将插入<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>
Ami*_*mit 23
以下代码有效
<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:
jQuery自版本1.4(？)自动检测您尝试插入的元素(使用append(),prepend(),before()或after()方法中的任何一个)是否为a
<tr>并将其插入到<tbody>您的第一个中表或将其包装成新的(<tbody>如果不存在).
小智 9
也许这就是你要找的答案.它找到最后一个实例<tr />并在其后附加新行:
<script type="text/javascript">
$('a').click(function() {
$('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
小智 8
我总是使用下面的代码更具可读性
$('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(''));