js 动态操作表格

来源：互联网发布：vb获取网页源代码编辑：程序博客网时间：2024/05/08 08:26
<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">        <title>增加Table行</title>    </head>    <script>        function addRow(tabId)        {        var tab = document.getElementById(tabId);        //添加一行              var colCount = getColCount(tabId);         var rowCount = getRowCount(tabId);   var newTr = tab.insertRow();    if(0 == rowCount)   {   colCount = 1;   }        for(var i = 0; i < colCount; ++i)        {        var tmp = newTr.insertCell();        tmp.innerHTML = '<input type=text value="">';         }        }        function addCell(tabId)        {        var tab = document.getElementById(tabId);        var rowCount = getRowCount(tabId);        for(var i = 0; i < rowCount;++i)        {        var tmp = tab.rows.item(i).insertCell();        tmp.innerHTML = '<input type=text value="">';         }        }        function delRow(tabId)        {        var rowCount = getRowCount(tabId);        if(rowCount <= 0)        {        return;        }        var tab = document.getElementById(tabId);        tab.deleteRow(rowCount - 1);        }        function delCell(tabId)        {           var tab = document.getElementById(tabId);           var rowCount = getRowCount(tabId);           if(rowCount > 0)           {           var colCount = getColCount(tabId);           if(1 >= colCount)           { clearTable(tabId);            }           else           {for ( var i = 0; i < tab.rows.length; i++) {tab.rows[i].deleteCell(colCount - 1);}           }           }        }        function clearTable(tabId)        {var tab = document.getElementById(tabId);while(tab.hasChildNodes()){tab.removeChild(tab.lastChild);}        }        function getRowCount(tabId)        {var tab = document.getElementById(tabId) ;        //表格行数        var rows = 0;      if(null != tab.rows)      {       rows = tab.rows.length ;      }      else      {      alert("no rows");      rows = 0;      }            return rows          }        function getColCount(tabId)        {        var tab = document.getElementById(tabId) ;          var cells = 0;        if(null != tab.rows && tab.rows.length > 0)        {        cells = tab.rows.item(0).cells.length;           }     return cells;        }/* * 提取一个表单的数据  */function formatTableData(tableId ) {var ret = "";var t3 = document.getElementById(tableId); for ( var i = 0; i < t3.rows.length; i++) {for ( var j = 0; j < t3.rows[i].cells.length; j++) {ret = ret + t3.rows[i].cells[j].children[0].value + "#";}}alert(ret);return ret;}    </script>    <body>        <table id="testTbl" border=1 >            <tr id="tr1">                <td > <input type=text value="12345"> </input>                 </td>            </tr>            <tr id="tr2">                            <td ><input type=text value="1bb"> </input> </td>            </tr>            <tr id="tr3">                             <td  > <input type=text value="1cc"> </input> </td>            </tr>        </table>                <br />        <input type="button" id="add" onclick="addRow('testTbl');" value="Add Row" /><input type="button" id="addcel" onclick="addCell('testTbl');" value="Add Cell" /><br />      <input type="button" id="delRow" onclick="delRow('testTbl');" value="remove Row" /><input type="button" id="delcel" onclick="delCell('testTbl');" value="remove Cell" /><br /><input type="button" id="delcel" onclick="formatTableData('testTbl');" value="get data" />    </body></html>
0 0