javascript实现动态增加行删除行._js实现删除行-优快云博客

本文链接：https://blog.youkuaiyun.com/liuchao1211/article/details/3273441

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript">
    function addRow()
    {
        //增加一行 
        var tr = modifyTable.insertRow(modifyTable.rows.length);
        var td ;
        //增加列 
        for(var i=0;i<modifyTable.rows[0].cells.length;i++)
        {
            td = tr.insertCell(i) ;
            
            if(i!=modifyTable.rows[0].cells.length-1)
            {
                //前几列 
                td.innerHTML="cell["+tr.rowIndex+"]["+i+"]" ;
            }
            else
            {
                //最后一列是个删除按钮 
                td.innerHTML="<input type='button' value='删除' οnclick='deleteRow(this)'>" ;
            }
        }
        
    }
    function deleteRow(btn)
    {
        //取得删除行的索引 
        var tr = btn.parentNode.parentNode ;
        
         if (modifyTable.rows.length > 1) {
              modifyTable.deleteRow(tr.rowIndex);
         }
    }
  </script>
 </HEAD>
 <BODY>
  <table id="modifyTable" border="1">
    <tr>
        <td>line1</td>
        <td>line2</td>
        <td>line3</td>
        <td><input type="button" value="增加一行" οnclick="addRow()"></td>
    </tr>
  </table>
 </BODY>
</HTML>
 