一个简单的table行的添加删除

本文链接：https://blog.csdn.net/sbtmbj2010/article/details/42119467

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<body>
<script type="text/javascript" >
function addbuz() {
                var table = document.getElementById("buztable");
                var len = table.rows.length;
                for(var i=2;i< len;i++){
                    table.rows[i].cells[0].innerHTML=i-1;
                }
                var tr = table.insertRow( - 1);
                td0 = tr.insertCell(0);
                td0.innerText = len - 1;
                td0.align = "center";
                td0.width = "5%";
                td0.height = "30px";
                td0.className = "tdLeftBottom";
                td1 = tr.insertCell(1);
                td1.innerHTML = "<input type='text' style='width:80%'/>";
                td1.align = "center";
                td1.width = "60%";
                td1.className = "tdLeftBottom";
                td2 = tr.insertCell(2);
                td2.innerHTML = "<input type='text' style='width:80%'/>";
                td2.align = "center";
                td2.width = "25%";
                td2.className = "tdLeftBottom";
                td3 = tr.insertCell(3);
                td3.innerHTML = "<input type='button' value='删除' οnclick='deletebuz(this);'/>";
                td3.align = "center";
                td3.width = "10%";
                td3.className = "tdRightBottom";
            }
            function deletebuz(obj){
              // var $obj=$(obj);
                alert(obj.value);
                //alert($obj.val());
                 var table=obj.parentNode.parentNode.parentNode;
                 obj.parentNode.parentNode.remove();
                 var len = table.rows.length;
                for(var i=2;i< len;i++){
                    table.rows[i].cells[0].innerHTML=i-1;
                }
            }
</script>
<div style="width:100%">
   <p>      你于
                    <span style="font-weight: bold;" name="sqsj">xxx-xx-xx</span>
                     提交的关于
                    <span style="font-weight: bold;" name="sqnr">XXXXXXXXXXXXXXXX</span>
                     申请,经审查，缺少下列材料或下列材料不合规，请予以补正。<br/>

                    <jsp:include page="/pages/yw/share/bz_table.jsp"
                                 flush="true"/>
<table width="90%" cellpadding="0" cellspacing="0"
         style="border-top:1px solid #A3D1D1;border-left:1px solid #A3D1D1;" id="buztable">
    <tbody>
      <tr>
        <td colspan="3"
            style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;">需补正材料</td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;">
          <input type="button" value="添加" οnclick="addbuz();"/>
        </td>
      </tr>
      <tr>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:5%;height:30px;">序号</td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:60%;">名称</td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:25%;">备注</td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:10%;">操作</td>
      </tr>
      <tr>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:5%;height:30px;">1</td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:60%;">
          <input type="text" value="" style="width:80%"/>
        </td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:25%;">
          <input type="text" value="" style="width:80%"/>
        </td>
        <td style="border-bottom:1px solid #A3D1D1;border-right:1px solid #A3D1D1;text-align:center;width:10%;"> </td>
      </tr>
    </tbody>
</table>
</div>
</body>
</html>