动态添加和删除行

< html >
     < head >
         < title > 动态添加和删除行 </ title >
         < script  type ="text/javascript" >
            <!--
            var count = 1;
            var nRows = 2;
            
            function addRow() {
                
                 var tBody = document.getElementById('theBody');
                 var newRow = document.createElement('tr');
                 var col1 = document.createElement('td');
                 var col2 = document.createElement('td');
                 var col3 = document.createElement('td');
                 var rA = document.createElement('a');

                 newRow.setAttribute('id', 'n' + count);
                
             rA.setAttribute('href', 'javascript:removeRow(\'n' + count + '\');');
                 rA.appendChild(document.createTextNode('Remove'));
                    
              col1.appendChild(document.createTextNode('Col 1 Row ' + nRows));
              col2.appendChild(document.createTextNode('Col 2 Row ' + nRows));
                col3.appendChild(rA);

                newRow.appendChild(col1);
                newRow.appendChild(col2);
                newRow.appendChild(col3);

                tBody.appendChild(newRow);

                count++;
                nRows++;
    
            }

            function removeRow(rowId) {
                 var tBody = document.getElementById('theBody');
                 tBody.removeChild(document.getElementById(rowId));
                nRows--;
            }
            -->
         </ script >
     </ head >
     < body >
         < table >
             < tbody  id ="theBody" >
             < tr >
                  < td > Col 1 Row 1 </ td >
                  < td > Col 2 Row 1 </ td >
               </ tr >                  
             </ tbody >
         </ table >     
         < p >< a  href ="javascript:addRow()" > Add Row </ a ></ p >
     </ body >
</ html >

转载于:https://www.cnblogs.com/applegreen/archive/2005/07/01/184613.html