日期:2014-05-16  浏览次数:20434 次

纯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>
??? ??? ??? ??? ??? ???