Html中JavaScript对表格的控制，行和列的增删

来源：互联网发布：java 微信服务号菜单编辑：程序博客网时间：2024/06/05 13:28

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

以下为例子：

<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>

以上在删除表格中最后一行，最后一列之后，如果要继续删除上一行的列时，需要多点击一次。

主要原因在于虽然列是删除了，但是删除之后表格中还有一个空行，

虽然可以直接运行，但如果打开调试之后，会发现在reduceRow函数中，第一个if语句下会报错，因为这时候获取的是一个空数据，

而如果要直接要在这个空行删除的同时删除下一个列，就必须重新调用reduceRow这个函数，在删除行之后，重新获取上一行中列的内容。

如下：

其中使用var声明与否都可以，有什么问题欢迎指正，谢谢。

0 0