我正在尝试将表行附加到现有表。
这就是我的表格结构:
<div id="productListContainer">
<table id="productListTable">
<thead>
<tr>
<td>
#
</td>
<td>
Product Name
</td>
<td>
Price
</td>
<td>
Quantity
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
使用以下函数,我试图附加一个新的表格行:
function(data) {
if (data.productAdded !== "undefined") {
$("#productListTable tr").append().html(data.productAdded);
}
}
成功追加一行。但是,如果我选择一个触发相同功能的不同项目,则添加的表格行将被新的表格覆盖。
我在ajax调用中使用此函数作为成功消息。
'data'是一个JSON对象,它包含productAdded,它本身就是一个字符串表格行。
答案 0 :(得分:3)
你想要做的是在我假设的表格的主体上添加一行。为此你需要这样做 -
$("#productListTable tbody").append(html_string);
您的html_string
需要包含所有必需的<tr>
和<td>
元素才能与您的表格标题相匹配。
参考文献 -
.append()
文档 - http://api.jquery.com/append/ 答案 1 :(得分:2)
不带参数调用.append()
,不附加任何内容,并返回原始jQuery对象。因此,当您致电.html()
时,您正在替换<tr>
的内容。
应该是:
$("#productListTable tr").append(data.productAdded);
编辑:这会附加到<tr>
内的<thead>
。我假设您要附加到<tbody>
。
$("#productListTable tbody").append(data.productAdded);
编辑2 :在附加到表格时,您需要确保在字符串中有<tr>
和正确数量的<td>
。