javascript

本帖最后由 bicel1222 于 2010-07-08 16:43:21 编辑

解决方案 »

  1.   


    动态删除表格的行、列，有点类似于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>
    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/18/5678212.aspx