js-表格(table)添加列、刪除列

1、js-表格(table)添加列、刪除列功能圖片截圖如下：一、Js代碼如下：?<script language="javascript" type="text/javascript">           function findObj(theObj, theDoc)             var p, i, foundOb

2、j;             if (!theDoc) theDoc = document;             if (p = theObj.indexOf("?") > 0 && parent.frames.length)        &

3、#160;        theDoc = parent.framestheObj.substring(p + 1).document; theObj = theObj.substring(0, p);                          if (!(foundOb

4、j = theDoctheObj) && theDoc.all)                 foundObj = theDoc.alltheObj; for (i = 0; !foundObj && i < theDoc.forms.length; i+) foundObj = theDoc.formsitheObj; for (i = 0; !foundObj && theD

5、oc.layers && i < theDoc.layers.length; i+) foundObj = findObj(theObj, theDoc.layersi.document);             if (!foundObj && document.getElementById)             

6、;    foundObj = document.getElementById(theObj); return foundObj;                    /添加一個(gè)列         count = 1;       

7、60; function AddNewColumn()             var txtTDLastIndex = findObj("txtTDLastIndex", document);             var columnID = parseInt(txtTDLastIndex.value);  &#

8、160;            var tab = document.getElementById("tab");             var rowLength = tab.rows.length;            &

9、#160;var columnLength = tab.rows1.cells.length;               for (var i = 0; i < rowLength; i+)                 if (i = 0)     

10、;                var oTd = tab.rows0.insertCell(columnLength);                     oTd.innerHTML = "<div align=&

11、#39;center' style='width:40px'><a href='javascript:' onclick="DeleteSignColumn(" + (+columnID) + ")">刪除</a></div>"                  else if (i = 1) /第一列:序

12、號(hào)                     var oTd = tab.rows1.insertCell(columnLength);                     oTd.innerHTM

13、L = "<div style='background: #D3E6FE;width=100%;'>" + (+count) + "</div>"                  else if (i > 1)            

14、0;        var oTd = tab.rowsi.insertCell(columnLength);                     oTd.id = "column" + columnID;        &#

15、160;            oTd.innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>"               &

16、#160;                                    /添加一個(gè)行         var index = 1;     

17、    function AddNewRow()             var txtTRLastIndex = findObj("txtTRLastIndex", document);             var rowID = parseInt(txtTRLastIndex.value);

18、               var tab = findObj("tab", document);             var columnLength = tab.rows0.cells.length;          

19、     /添加行             var newTR = tab.insertRow(tab.rows.length);             newTR.id = "SignItem" + rowID;       

20、        for (var i = 0; i < columnLength; i+)                 if (i = 0) /第一列:序號(hào)                 

21、    newTR.insertCell(0).innerHTML = +index;                  else if (i > 0 && i < 4)                 

22、0;   newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />"                       

23、0;          else if (i >= 4)                     newTR.insertCell(i).innerHTML = "<textarea id=''  rows='4' style='

24、;width:150; height:40px;'></textarea>"                                           &

25、#160; /添加列:刪除按鈕             var lastTd = newTR.insertCell(columnLength);             lastTd.innerHTML = "<div align='center' style='width:40px'><

26、a href='javascript:' onclick="DeleteSignRow('SignItem" + rowID + "')">刪除</a></div>"               /將行號(hào)推進(jìn)下一行            

27、 txtTRLastIndex.value = (rowID + 1).toString();                    /刪除指定行         function DeleteSignRow(rowid)          

28、;   var tab = findObj("tab", document);             var signItem = findObj(rowid, document);               /獲取將要?jiǎng)h除的行的Index    

29、0;        var rowIndex = signItem.rowIndex;               /刪除指定Index的行             tab.deleteRow(rowIndex);    

30、0;            /重新排列序號(hào)，如果沒有序號(hào)，這一步省略             for (i = 2; i < tab.rows.length; i+)                

31、60;tab.rowsi.cells0.innerHTML = i - 1;                            -index                  

32、  /刪除指定列         function DeleteSignColumn(columnId)             var tab = document.getElementById("tab");             v

33、ar columnLength = tab.rows1.cells.length;               /刪除指定單元格              for (var i = 0; i < tab.rows.length; i+)        &

34、#160;        tab.rowsi.deleteCell(columnId);                            /重新排列序號(hào)，如果沒有序號(hào)，這一步省略       &

35、#160;     var column = columnLength - 4;               for (var j = 1; j < column; j+)                 tab.rows1.cellsj +

36、3.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>"                            -count;    

37、                  /清空列表         function ClearAllSign()             /if (confirm('確定要清空所有嗎？')   &

38、#160;         index = 0;             var tab = findObj("tab", document);             var rowscount = tab.rows.length;  &

39、#160;            /循環(huán)刪除行,從最后一行往前刪除             for (i = rowscount - 1; i > 1; i-)                 

40、tab.deleteRow(i);                            /重置最后行號(hào)為1             var txtTRLastIndex = findObj("txtTRLas

41、tIndex", document);             txtTRLastIndex.value = "1"               /預(yù)添加一行             Add

42、NewRow();             /              </script>二、HTML部分：?<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">     

43、0;   <table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"            style="text-align: center">      

44、0;      <tr id="tr1">                 <td>                      

45、;                  </td>                 <td>              

46、;                          </td>                 <td>      

47、;                                  </td>               

48、0; <td>                                        </td>       

49、0;         <td>                                        <

50、/td>             </tr>             <tr id="trHeader">                 <t

51、d style="background: #D3E6FE">                     NO                 </td>     &

52、#160;           <td style="background: #D3E6FE">                     試驗(yàn)項(xiàng)目          &

53、#160;      </td>                 <td style="background: #D3E6FE">                  

54、   檢驗(yàn)項(xiàng)目                 </td>                 <td style="background: #D3E6FE">     

55、                標(biāo)準(zhǔn)                 </td>                

56、60;<td style="background: #D3E6FE">                     1                 </td>    

57、         </tr>             <tr>                 <td>        &#

58、160;            1                 </td>                 <td>  &

59、#160;                  <input id='textItem0' type='text' style="border: 0px" size='12' />              &#

60、160;  </td>                 <td>                     <input id='checkItem0' type='t

61、ext' style="border: 0px" size='12' />                 </td>                 <td>    

62、0;                <input id='stand0' type='text' style="border: 0px" size='12' />                 &l

63、t;/td>                 <td>                     <textarea rows="4" id="" style="wid

64、th: 150px; height: 40px;"></textarea>                 </td>             </tr>         </tab

65、le>         <table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">             <tr>  

66、               <td style="background: #D3E6FE">                 </td>                 <td style="background: #D3E6FE">      &