javascript - 删除html表格行最后一个单元格的内容

标签 javascript html

我有一个包含行的 html 表格:

<tr id="firstInRow"><td></td><td><input name="longP1" id="longP1" type="text" style="width: 70px"></td><td><input name="latP1" id="latP1" type="text" style="width: 70px"></td><td>(upper left)</td></tr>
<tr id="secInRow"><td></td><td><input name="longP2" id="longP2" type="text" style="width: 70px"></td><td><input name="latP2" id="latP2" type="text" style="width: 70px"></td><td>(lower right)</td></tr>

创建一个像这样的表: latLongTable

我已经创建了一个可以运行的添加行函数,并且我正在尝试删除该函数中最后一个单元格的内容。我想删除文本“(左上)”和“(右下)”。我尝试了几种方法,包括:

var rowIn1 = document.getElementById("firstInRow");
rowIn1.deleteCell(-1);

但是这不起作用。

最佳答案

您可以使用 jQuery 的 .remove() 函数。 例如:

$("#firstInRow").find("td:last-child").remove();

这将找到 id 为 firstInRow 的行的最后一列 (td) 并将其从 DOM 中删除。您可以使用相同的方法删除另一个单元格。

如果您只想删除内容,请使用:

$("#firstInRow").find("td:last-child").text('');

这不会从 DOM 中删除最后一列,而是清除最后一列的内容。

$("#clear").on("click", function() {
$("#firstInRow").find("td:last").text("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table border="1" cellpadding="5">
<tr id="firstInRow">
<td>First</td>
<td>Last</td>
<td>Content to clear</td>
</tr>
</table>
<button type="button" id="clear">Clear last column</button>
</body>

关于javascript - 删除html表格行最后一个单元格的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51518685/

相关文章:

javascript - Jquery 将 css 样式应用于除鼠标悬停图像之外的具有特定类的所有元素

javascript - sleep() 的 JavaScript 版本是什么?

JQuery - 删除中间元素后合并

html - 如何更改背景线性的彩色进度条的宽度?

html - 当溢出样式设置为 "auto"时,Chrome 不会呈现正确的填充

javascript - 进行浏览器测试时 Windows 版本重要吗?

javascript - 为什么我收到 Uncaught TypeError : Cannot read property 'displayQuestion' of undefined?

javascript - 在 Chrome 中使用 javascript 启动 doc 文件

javascript - 使用 html2canvas 定位特定 div

javascript - 设置 html 输入或文本区域的值