html table insert/delete rows

xml 代码
 
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function deleteRow(i){   
  5.   document.getElementById('myTable').deleteRow(i)   
  6. }   
  7.   
  8. function insRow(){   
  9.   var x=document.getElementById('myTable').insertRow(2)   
  10.   var y=x.insertCell(0)   
  11.   var z=x.insertCell(1)   
  12.   y.innerHTML="NEW CELL1"  
  13.   z.innerHTML="NEW CELL2"  
  14. }   
  15.   
  16. </script>  
  17. </head>  
  18.   
  19. <body>  
  20. <table id="myTable" border="1">  
  21. <tr>  
  22. <td>Row 1</td>  
  23. <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>  
  24. </tr>  
  25. <tr>  
  26. <td>Row 2</td>  
  27. <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>  
  28. </tr>  
  29. <tr>  
  30. <td>Row 3</td>  
  31. <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>  
  32. </tr>  
  33. </table>  
  34. <form>  
  35. <input type="button" onclick="insRow()" value="Insert row">  
  36. </form>  
  37. </body>  
  38. </html>   
xml 代码
 
  1. <HTML>  
  2.     <HEAD>  
  3.         <TITLE>Modifying Table Cell Content</TITLE>  
  4.         <STYLE TYPE="text/css">  
  5. THEAD {   
  6.     background-color: lightyellow;   
  7.     font-weight: bold   
  8. }   
  9.   
  10. TFOOT {   
  11.     background-color: lightgreen;   
  12.     font-weight: bold   
  13. }   
  14.   
  15. #myTABLE {   
  16.     background-color: bisque   
  17. }   
  18. </STYLE>  
  19.         <SCRIPT LANGUAGE="JavaScript">  
  20. var theTable, theTableBody   
  21. function init() {   
  22.   theTable = (document.all) ? document.all.myTABLE :    
  23.     document.getElementById("myTABLE")   
  24.   theTabletheTableBody = theTable.tBodies[0]   
  25. }   
  26. function appendRow(form) {   
  27.   insertTableRow(form, -1)   
  28. }   
  29. function addRow(form) {   
  30.   insertTableRow(form, form.insertIndex.value)   
  31. }   
  32. function insertTableRow(form, where) {   
  33.   var now = new Date()   
  34.   var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(),    
  35.     now.getMilliseconds()]   
  36.   clearBGColors()   
  37.   var newCell   
  38.   var newRow = theTableBody.insertRow(where)   
  39.   for (var i = 0; i < nowData.length; i++) {   
  40.     newCell = newRow.insertCell(i)   
  41.     newCell.innerHTML = nowData[i]   
  42.     newCell.style.backgroundColor = "salmon"  
  43.   }   
  44.   updateRowCounters(form)   
  45. }   
  46. function removeRow(form) {   
  47.   theTableBody.deleteRow(form.deleteIndex.value)   
  48.   updateRowCounters(form)   
  49. }   
  50. function insertTHEAD(form) {   
  51.   var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]   
  52.   var newCell   
  53.   var newTHEAD = theTable.createTHead()   
  54.   newTHEAD.id = "myTHEAD"  
  55.   var newRow = newTHEAD.insertRow(-1)   
  56.   for (var i = 0; i < THEADData.length; i++) {   
  57.     newCell = newRow.insertCell(i)   
  58.     newCell.innerHTML = THEADData[i]   
  59.   }   
  60.   updateRowCounters(form)   
  61.   form.addTHEAD.disabled = true  
  62.   form.deleteTHEAD.disabled = false  
  63. }   
  64. function removeTHEAD(form) {   
  65.   theTable.deleteTHead()      
  66.   updateRowCounters(form)   
  67.   form.addTHEAD.disabled = false  
  68.   form.deleteTHEAD.disabled = true  
  69. }   
  70. function insertTFOOT(form) {   
  71.   var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]   
  72.   var newCell   
  73.   var newTFOOT = theTable.createTFoot()   
  74.   newTFOOT.id = "myTFOOT"  
  75.   var newRow = newTFOOT.insertRow(-1)   
  76.   for (var i = 0; i < TFOOTData.length; i++) {   
  77.     newCell = newRow.insertCell(i)   
  78.     newCell.innerHTML = TFOOTData[i]   
  79.   }   
  80.   updateRowCounters(form)   
  81.   form.addTFOOT.disabled = true  
  82.   form.deleteTFOOT.disabled = false  
  83. }   
  84.   
  85. function removeTFOOT(form) {   
  86.   theTable.deleteTFoot()      
  87.   updateRowCounters(form)   
  88.   form.addTFOOT.disabled = false  
  89.   form.deleteTFOOT.disabled = true  
  90. }   
  91. function insertCaption(form) {   
  92.   var captionData = form.captionText.value   
  93.   var newCaption = theTable.createCaption()   
  94.   newCaption.innerHTML = captionData  
  95.   form.addCaption.disabled = true  
  96.   form.deleteCaption.disabled = false  
  97. }   
  98. function removeCaption(form) {   
  99.   theTable.deleteCaption()      
  100.   form.addCaption.disabled = false  
  101.   form.deleteCaption.disabled = true  
  102. }   
  103. // housekeeping functions   
  104. function updateRowCounters(form) {   
  105.   var sel1 = form.insertIndex   
  106.   var sel2 = form.deleteIndex   
  107.   sel1.options.length = 0  
  108.   sel2.options.length = 0  
  109.   for (var i = 0; i < theTableBody.rows.length; i++) {   
  110.     sel1.options[i] = new Option(i, i)   
  111.     sel2.options[i] = new Option(i, i)   
  112.   }   
  113.   form.removeRowBtn.disabled = (i==0)   
  114. }   
  115. function clearBGColors() {   
  116.   for (var i = 0; i < theTableBody.rows.length; i++) {   
  117.     for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {   
  118.         theTableBody.rows[i].cells[j].style.backgroundColor = ""        
  119.     }   
  120.   }   
  121. }   
  122. </SCRIPT>  
  123.     </HEAD>  
  124.     <BODY onLoad="init()">  
  125.         <H1>  
  126.             Modifying Tables   
  127.         </H1>  
  128.         <HR>  
  129.         <FORM NAME="controls">  
  130.             <FIELDSET>  
  131.                 <LEGEND>  
  132.                     Add/Remove Rows   
  133.                 </LEGEND>  
  134.                 <TABLE WIDTH="100%" CELLSPACING=20>  
  135.                     <TR>  
  136.                         <TD>  
  137.                             <INPUT TYPE="button" VALUE="Append 1 Row"  
  138.                                 onClick="appendRow(this.form)">  
  139.                         </TD>  
  140.                         <TD>  
  141.                             <INPUT TYPE="button" VALUE="Insert 1 Row"  
  142.                                 onClick="addRow(this.form)">  
  143.                             at index:   
  144.                             <SELECT NAME="insertIndex">  
  145.                                 <OPTION VALUE="0">  
  146.                                     0   
  147.                             </SELECT>  
  148.                         </TD>  
  149.                         <TD>  
  150.                             <INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row"  
  151.                                 DISABLED onClick="removeRow(this.form)">  
  152.                             at index:   
  153.                             <SELECT NAME="deleteIndex">  
  154.                                 <OPTION VALUE="0">  
  155.                                     0   
  156.                             </SELECT>  
  157.                         </TD>  
  158.                     </TR>  
  159.                 </TABLE>  
  160.             </FIELDSET>  
  161.             <FIELDSET>  
  162.                 <LEGEND>  
  163.                     Add/Remove THEAD and TFOOT   
  164.                 </LEGEND>  
  165.                 <TABLE WIDTH="100%" CELLSPACING=20>  
  166.                     <TR>  
  167.                         <TD>  
  168.                             <INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD"  
  169.                                 onClick="insertTHEAD(this.form)">  
  170.                             <BR>  
  171.                             <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD"  
  172.                                 DISABLED onClick="removeTHEAD(this.form)">  
  173.                         </TD>  
  174.                         <TD>  
  175.                             <INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT"  
  176.                                 onClick="insertTFOOT(this.form)">  
  177.                             <BR>  
  178.                             <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT"  
  179.                                 DISABLED onClick="removeTFOOT(this.form)">  
  180.                         </TD>  
  181.                     </TR>  
  182.                 </TABLE>  
  183.             </FIELDSET>  
  184.             <FIELDSET>  
  185.                 <LEGEND>  
  186.                     Add/Remove Caption   
  187.                 </LEGEND>  
  188.                 <TABLE WIDTH="100%" CELLSPACING=20>  
  189.                     <TR>  
  190.                         <TD>  
  191.                             <INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption"  
  192.                                 onClick="insertCaption(this.form)">  
  193.                         </TD>  
  194.                         <TD>  
  195.                             Text:   
  196.                             <INPUT TYPE="text" NAME="captionText" SIZE=40  
  197.                                 VALUE="Sample Caption">  
  198.                         <TD>  
  199.                             <INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption"  
  200.                                 DISABLED onClick="removeCaption(this.form)">  
  201.                         </TD>  
  202.                     </TR>  
  203.                 </TABLE>  
  204.             </FIELDSET>  
  205.         </FORM>  
  206.         <HR>  
  207.         <TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>  
  208.             <TBODY>  
  209.         </TABLE>  
  210.     </BODY>  
  211. </HTML>  

你可能感兴趣的:(JavaScript,html,xml,css,J#)