动态删除表格的行、列，有点类似于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>
posted on 2010-06-18 14:59 java课程设计 阅读(346) 评论(0) 编辑 收藏 举报
