网页动态表格操作与交互-优快云博客

<html>
<head>
   <script type="text/javascript">
       function deleteAll(){
           var tableName = document.getElementById("t1");
           var rows = tableName.rows.length;
           for(var i=rows-1;i>0;i--){
               tableName.deleteRow(i);

           }
       }
       function addRows(){
           var tableName = document.getElementById("t1");
           var rows = tableName.rows.length;
           for(var j=10;j>0;j--){
               var row = tableName.insertRow(rows);
               row.οnmοuseοver=function(){
                   this.style.background="#DDFF22";
               }
               row.οnmοuseοut=function(){
                   this.style.background="#FFFFFF";
               }

               var cell1 = row.insertCell(0);
               cell1.οnclick=function(){
                   alert(this.innerHTML);
               }
               cell1.innerHTML="row:"+j+";cell:"+1;
               var cell2 = row.insertCell(1);
               cell2.οnclick=function(){
                   alert(this.innerHTML);
               }
               cell2.innerHTML="row:"+j+";cell:"+2;
               var cell3 = row.insertCell(2);
               cell3.οnclick=function(){
                   alert(this.innerHTML);
               }
               cell3.innerHTML="row:"+j+";cell:"+3;
               var cell4 = row.insertCell(3);
               cell4.οnclick=function(){
                   alert(this.innerHTML);
               }
               cell4.innerHTML="row:"+j+";cell:"+4;
           }
       }
   </script>
</head>
<body>
<table id="t1">
   <thead>
       <tr>
           <th>A</th><th>B</th><th>C</th><th>D</th>
       </tr>
   </thead>
   <tbody>
   </tbody>
   <input type="button" value="Delete" οnclick="deleteAll();"/>
   <input type="button" value="Add" οnclick="addRows();"/>
</table>
</body>
</html>

js 操作table