如何使用 jQuery 将行追加到表中?
Posted
技术标签:
【中文标题】如何使用 jQuery 将行追加到表中?【英文标题】:How do you append rows to a table using jQuery? 【发布时间】:2011-01-10 18:42:27 【问题描述】:您好,我正在尝试使用 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>
【问题讨论】:
见:***.com/a/50365764/7186739 【参考方案1】:添加为表格的第一行或最后一行
添加到表格的第一行
$(".table tbody").append("<tr><td>New row</td></tr>");
添加到表格的最后一行
$(".table tbody").prepend("<tr><td>New row</td></tr>");
【讨论】:
【参考方案2】:为了提高可读性,我总是使用下面的这段代码
$('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(''));
【讨论】:
【参考方案3】:试试:
$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");
在partial
中,你应该有:
<td>row1</td>
<td>row2</td>
【讨论】:
【参考方案4】:以下代码有效
<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>
请注意this will work as of jQuery 1.4,即使表格包含<tbody>
元素:
jQuery 从 1.4(?) 版开始自动检测您尝试插入的元素(使用任何 append()、prepend()、before() 或 after() 方法)是否为
<tr>
并插入将其放入表中的第一个<tbody>
中,如果不存在,则将其包装到新的<tbody>
中。
【讨论】:
以下也可以使用 var value1 = 1; $('#myTable').append('也许这就是您正在寻找的答案。它找到<tr />
的最后一个实例,并在其后追加新行:
<script type="text/javascript">
$('a').click(function()
$('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
);
</script>
【讨论】:
【参考方案6】:我假设您想将此行添加到 <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 内容。尝试使用 document.createElement("tr") 和 document.appendElement() 我修改了您的源代码,使其能够正常工作。 (注意上面的编辑)我之前没有注意到这一点,但你没有包含$(document).ready()
,这基本上破坏了一切。除非您等待ready()
事件触发,否则不会加载 DOM,并且您的 jQuery 选择器可能找不到它要查找的内容。
不要忘记在源示例中包含“tbody”。【参考方案7】:
您应该追加到表而不是行。
<script type="text/javascript">
$('a').click(function()
$('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
);
</script>
【讨论】:
好的,你做错了,请在此处检查 (secretgeek.net/rtjqe/realtimejqueryeditor.htm) 你自己的代码与我的解决方案或多米尼克解决方案,你会看到有效。以上是关于如何使用 jQuery 将行追加到表中?的主要内容,如果未能解决你的问题,请参考以下文章