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

js动态增加删除表格行代码

<script type="text/javascript">

?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'>&nbsp;&nbsp;";

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

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

? 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>&nbsp;&nbsp;";

? td_5.innerHTML="<div style='width:60px;'><button ?onclick='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>";