纯js 操作dom来动态添加一行删除一行

 function addOneLineOnClick() {
        var row= document.getElementById("tblFlowCardDetail").insertRow(document.getElementById("tblFlowCardDetail").rows.length);
        var col = row.insertCell(0);
        col.innerHTML = "<input type=\"hidden\" name=\"aimInnerId\"><input readonly=\"true\" maxLength=6 size=6 name=aimId><input type=button  value =...   name=btnSelectAimClient index=\""+ rowIndex +"\" onclick=\"selectAimClient(this.index)\">";
        col = row.insertCell(1);
        col.innerHTML = "<input id=aimName name=aimName size=25 maxlength=25 readonly=\"true\">";
        col = row.insertCell(2);
        col.innerHTML = "<input readonly=\"true\" maxLength=6 size=6 name=itemNo><input type=button  value =...   name=btnSelectItem index=\""+ rowIndex +"\" onclick=\"selectItem(this.index)\">";
        col = row.insertCell(3);
        col.innerHTML = "<input id=itemName name=itemName size=25 maxlength=25 readonly=\"true\">";       
        col = row.insertCell(4);
        col.innerHTML = "<input id=spec name=spec size=10 maxlength=10 readonly=\"true\">";
        col = row.insertCell(5);
        col.innerHTML = "<input id=pattern name=pattern size=10 maxlength=10 readonly=\"true\">";
        col = row.insertCell(6);
        col.innerHTML = "<input id=unit name=unit size=4 maxlength=4 readonly=\"true\">";
        col = row.insertCell(7);
        col.innerHTML = "<input id=qty name=qty size=6 maxlength=6>";
        col = row.insertCell(8);
        col.innerHTML = "<input type='button' value='删除' id=btnDeleteLine name=btnDeleteLine onclick=\"return DeleteRow('row" + rowIndex + "')\">";
        row.setAttribute("id", "row" + rowIndex);
        rowIndex++;
    }
   
    function DeleteRow(rowTag){
    //alert(rowTag);
         var i =  document.getElementById("tblFlowCardDetail").rows(rowTag).rowIndex;
         var j;
        for(j=i;j<=rowIndex;j++) {   
            document.getElementById("tblFlowCardDetail").rows(j).cells(0).all("btnSelectAimClient").index--;
            document.getElementById("tblFlowCardDetail").rows(j).cells(2).all("btnSelectItem").index--;   
        }
        //alert(i);
           document.getElementById("tblFlowCardDetail").deleteRow(i);
        rowIndex--;
    }

 

 

<table width="95%" border="0" cellpadding="0" cellspacing="0"
                    name="tblFlowCardDetail" id="tblFlowCardDetail">
                    <tr>
                        <td nowrap>
                            <div align="left">
                                <font color="#FF0000">*</font>需方客户代码
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                需方客户名称
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                <font color="#FF0000">*</font>物料代码
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                物料名称
                            </div>
                        </td>
                        <td nowrap>
                            规格
                        </td>
                        <td nowrap>
                            型号
                        </td>
                        <td nowrap>
                            计量单位
                        </td>
                        <td nowrap>
                            <font color="#FF0000">*</font>操作数量
                        </td>
                        <td nowrap>
                            <div align="left">
                                删除
                            </div>
                        </td>
                    </tr>
                </table>
                <p>