Html中JavaScript对表格的控制，行和列的增删_html 表格行中增删行按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/ArdenSrilank/article/details/55218312

这篇博客适合初学者，介绍了如何使用JavaScript动态地对HTML表格进行操作，包括增加行、删除行以及删除最后一行的最后一列。示例代码展示了在减少行和列时遇到的问题及解决方法，特别是当删除最后一列后，如何处理空行并删除上一行的列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学者，如若有错的地方欢迎指正，定当虚心听教。

以下为例子：

<body>
<table id="tables">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<input type="button" id="" value="增加行数" onclick="add()" />
<input type="button" value="减少行数" onclick="reduce()" />
<input type="button" value="减少最后一行最后一列" onclick="reduceRow()" />

<script type="text/javascript">
function add() {
var getTable = document.getElementById("tables");
var addRow = getTable.insertRow();
var addC1 = addRow.insertCell(0).innerHTML = "第三行第一列";
var addC2 = addRow.insertCell(1).innerHTML = "第三行第二列";
}

function reduce() {
var getTable = document.getElementById("tables");
var getRow = getTable.getElementsByTagName("tr");
var reduceRow = getTable.deleteRow(getRow.length - 1);
}

function reduceRow() {
//获取ID为‘tables’的对象
var getTable = document.getElementById("tables");
//从对象中获取标签为‘tr’的对象
var getRow = getTable.rows[getTable.rows.length - 1];
var getColumn = getRow.cells;
if(getColumn.length == 0) {
reduce();
var deleteColumn = getRow.deleteCell(getRow.length - 1);
}
var deleteColumn = getRow.deleteCell(getRow.length - 1);
}
</script>
</body>