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

来源：互联网发布：深圳网络教育哪家好编辑：程序博客网时间：2024/05/16 07:59

动态删除表格的行、列，有点类似于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>