带有 HTML 表格标签的 Jquery HTML 或 AFTER 或 APPEND
Posted
技术标签:
【中文标题】带有 HTML 表格标签的 Jquery HTML 或 AFTER 或 APPEND【英文标题】：Jquery HTML or AFTER or APPEND with HTML table tag 【发布时间】：2021-04-26 09:09:00 【问题描述】：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_after2
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText()
$("#tblGrid").html("<td>NameName2</td><td>Budget Value 2</td></tr><tr><td>NameName3</td><td>Budget Value 3</td>");
</script>
</head>
<body>
<table>
<tbody>
<th><h4>Name Heading</h4></th>
<th>
<table>
<thead>
<tr>
<th>Budget Heading</th>
</tr>
</thead>
</table>
</th>
<tr id="tblGrid"></tr>
<tr><td>NameName1</td><td>Budget Value 1</td></tr>
</tbody>
</table>
<button onclick="afterText()">Button</button>
</body>
</html>
点击按钮后输出是这样的：
名称标题预算标题
NameName3 预算值 3
NameName1 预算值 1
按钮
您能否帮助了解数字“2”的价值在哪里？
预期输出：
名称标题预算标题
NameName2 预算值 2
NameName3 预算值 3
NameName1 预算值 1
按钮
而且每次我们点击按钮时，它不应该追加 2 和 3，而是清除旧的迭代值。请提出建议！
【问题讨论】：
您正在尝试在现有的 tr 元素中添加</tr>...这是无效的 HTML...也许浏览器正在丢弃它之前的所有内容。
【参考方案1】：
您的 html 表格结构稍有不正确。我改变了thead 标签的结构。而且你不需要为此使用h4 标签。
我用 id=tblGrid 将您的tr 标记定义为tbody 标记。
另外，您正在使用html() 方法。但此方法覆盖内容。最好使用append() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText()
$("#tblGrid").append("<tr><td>NameName2</td><td>Budget Value 2</td></tr><tr><td>NameName3</td><td>Budget Value 3</td></tr>");
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name Heading</th>
<th>Budget Heading</th>
</tr>
</thead>
<tbody id="tblGrid">
<tr>
<td>NameName1</td>
<td>Budget Value 1</td>
</tr>
</tbody>
</table>
<button onclick="afterText()">Button</button>
</body>
</html>【讨论】：
嗨 s.kuznetsov，感谢您的帮助。我现在可以使用这种方法并做我的事情了。我唯一添加的是在 append (...empty().append...) 之前使用 empty，因为在多次单击按钮时，它会保留旧值，我不希望这样，所以不得不对 NameName1 和 Budget 进行一些调整值 1，但这对我有用。 @HardikNuwal，你好。是的，方法 append() 动态添加相同的值。所以 empty() 是有道理的。乐于助人。以上是关于带有 HTML 表格标签的 Jquery HTML 或 AFTER 或 APPEND的主要内容，如果未能解决你的问题，请参考以下文章