javascript js 删除表格的行、单元列

最新推荐文章于 2021-06-16 04:26:58 发布

转载最新推荐文章于 2021-06-16 04:26:58 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/javaTest/archive/2010/06/18/2589425.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态删除HTML表格中指定行与列的方法。通过两个函数实现：removeCells用于删除指定范围内的列，removeRows用于删除指定范围内的行。此方法适用于需要动态调整表格布局的应用场景。

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

动态删除表格的行、列，有点类似于String中的substring函数。不过这里也有开始删除的位置和删除的长度。但是不包括起始位置，用法和substring类似； <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>tab2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> //删除table列：从start列开始删除,共删end列（不包括start） function removeCells(tab, start, end) { var rows = tab.rows; for (var i = 0; i < rows.length; i++) { var cells = rows[i].cells; /*for (var j = 0; j < cells.length; j++) { if (j >= start && j <= end) { tab.rows[i].deleteCell(start); } }*/ for (var j = 0; j < end; j++) { tab.rows[i].deleteCell(start); } } } //删除table行，从start行开始删除，共删end行（不包括start） function removeRows(tab, start, end) { var rows = tab.rows; /*for (var i = 0; i < rows.length; i++) { if (i >= start && i <= end) { tab.deleteRow(start); } }*/ for (var i = 0; i < end; i++) { tab.deleteRow(start); } } function deleteCells() { var tab = document.getElementById("tab"); var start = document.getElementById("startCell").value; var end = document.getElementById("endCell").value; if (tab.rows.length > 0) { var cell = tab.rows[0].cells; start = start > cell.length ? cell.length : start; start = start < 0 ? 0 : start; end = end > cell.length ? cell.length : end; end = end < 0 ? 0 : end; } removeCells(tab, start, end); } function deleteRows() { var tab = document.getElementById("tab"); var start = document.getElementById("startRow").value; var end = document.getElementById("endRow").value; start = start > tab.rows.length ? tab.rows.length : start; start = start < 0 ? 0 : start; end = end > tab.rows.length ? tab.rows.length : end; end = end < 0 ? 0 : end; removeRows(tab, start, end); } window.onload = function () { var showDiv = document.getElementById("show"); var htmlTemplate = "<table id='tab' border='1'>"; for (var i = 0; i < 4; i++) { htmlTemplate += "<tr>"; for (var j = 0; j < 13; j++) { htmlTemplate += "<td>" + i + "-" + j + "</td>"; } htmlTemplate += "</tr>"; } htmlTemplate += "</table>"; showDiv.innerHTML = htmlTemplate; } </script> </head> <body> <input type="text" id="startCell" /> <input type="text" id="endCell" /> <input type="button" value="删除列" onclick="deleteCells()"><br/> <input type="text" id="startRow" /> <input type="text" id="endRow" /> <input type="button" value="删除行" onclick="deleteRows()"> <div id="show"></div> </body> </html>

转载于:https://www.cnblogs.com/javaTest/archive/2010/06/18/2589425.html