js动态增加删除表格行代码-CSDN博客

本文链接：https://blog.csdn.net/iteye_5347/article/details/82519850

var i = 0;

function addRow(){

var tabEle = document.getElementById("tab_1");

var addTr = tabEle.insertRow();

addTr.setAttribute("id", "tr_"+i);

var td_1 = addTr.insertCell();

td_1.setAttribute("id", "td_"+i+"_1");

var td_2 = addTr.insertCell();

td_2.setAttribute("id", "td_"+i+"_2");

var td_3 = addTr.insertCell();

td_3.setAttribute("id", "td_"+i+"_3");

var td_4 = addTr.insertCell();

td_4.setAttribute("id", "td_"+i+"_4");

var td_5 = addTr.insertCell();

td_5.setAttribute("id", "td_"+i+"_5");

td_1.innerHTML="<input type='text' id='txt_"+i+"_1' width='120px'>  ";

td_2.innerHTML="<input type='text' id='txt_"+i+"_2' size='6'>  ";

td_3.innerHTML="<input type='text' id='txt_"+i+"_3' size='6'>  ";

td_4.innerHTML="<div style='width:120px;'><input type='radio' name='rad_"+i+"_4' checked value='↑'>↑<input type='radio' name='rad_"+i+"_4' value='↓'>↓<input type='radio' name='rad_"+i+"_4' value='-'>- </div>  ";

td_5.innerHTML="<div style='width:60px;'><button οnclick='deleteRow("+i+");'>删除</button></div>";

i++;

}

function deleteRow(index){

var tabEle = document.getElementById("tab_1");

var currentRow = document.getElementById("tr_"+index);

tabEle.deleteRow(currentRow.rowIndex);

}

function createHtm(){

var testEle = document.getElementById("div_new");

var htmlValue = document.getElementById("div_1").innerHTML;

htmlValue = htmlValue.replace("tab_1", "tab_new");

htmlValue = htmlValue.replaceAll("tr_", "tr_new_");

htmlValue = htmlValue.replaceAll("td_", "td_new_");

htmlValue = htmlValue.replaceAll("txt_", "txt_new_");

htmlValue = htmlValue.replaceAll("rad_", "rad_new_");

testEle.innerHTML=htmlValue;

updateHtmValue();

var NewDivEle = document.getElementById("div_new");

document.getElementById("txt_htmlValue").value = NewDivEle.innerHTML;

document.getElementById("htmlIndex").value = getGeneralIndex();

//alert(document.all.xlpmForm.innerHTML);

document.all.xlpmForm.submit();

}

function updateHtmValue(){

var tabNewEle = document.getElementById("tab_new");

var trNodes = tabNewEle.childNodes[0].childNodes;

for(var k = 0; k < trNodes.length; k++){

//var trId = trNodes[k].getAttribute("id");

if(trNodes[k] && trNodes[k].childNodes.length >= 4){

trNodes[k].deleteCell(4);

}

var itemValue = "";

var itemTrEle = null;

var itemTxtEle = null;

var itemParentEle = null;

for(var k = 0; k <= i; k++){

for(var j = 1; j < 5; j++){

itemParentEle = document.getElementById("td_new_"+k+"_"+j);

if(!itemParentEle){

continue;

}

if(j == 4){

itemTxtEle = document.getElementsByName("rad_new_"+k+"_"+j);

for(var n = 0; n < itemTxtEle.length; n++){

if(itemTxtEle[n].checked){

itemValue = itemTxtEle[n].value;

break;

}

if(itemValue == "↑"){

itemParentEle.innerHTML = "<FONT color=#00ff00><B>"+itemValue+"</B></FONT>";

}else if(itemValue == "↓"){

itemParentEle.innerHTML = "<FONT color=#ff0000><B>"+itemValue+"</B></FONT>";

}else if(itemValue == "-"){

itemParentEle.innerHTML = "<FONT color=#000000><B>"+itemValue+"</B></FONT>";

}else{

itemParentEle.innerHTML = "<B>"+itemValue+"</B>";

}

}else{

itemTxtEle = document.getElementById("txt_new_"+k+"_"+j);

if(itemTxtEle){

itemParentEle.innerHTML = itemTxtEle.value;

}

function getGeneralIndex(){

var indexValue = "1";

var indexEle = document.getElementsByName("theIndex");

for(var n = 0; n < indexEle.length; n++){

if(indexEle[n].checked){

indexValue = indexEle[n].value;

break;

}

return indexValue;

}

String.prototype.replaceAll= function(s1, s2){

return this.replace(new RegExp(s1, "gm"), s2);

}

</script>

</head>

</form>

<br />

<tr>

<input type="radio" name="theIndex" checked="checked" value="1" />序列一

<input type="radio" name="theIndex" value="2" />序列二

</td>

<td >

<button οnclick="createHtm();">生成htm</button>

</td>

</tr>

</table>

<TR>

</table>

</div>

</body>