当前位置: 代码迷 >> JavaScript >> js动态增多删除表格行代码
  详细解决方案

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

热度:219   发布时间:2013-07-16 22:38:05.0
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>";

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

<body scroll = "no" style="background-color:#EAEFF8; margin:0 0 0 0;"> ?

? <form id="xlpmForm" name="xlpmForm" method="post" action="xlpmCreate.jsp">

? ? <input id="userName" name="userName" type="hidden" ?value="<%=userName %>"/>

? ? <input id="userPwd" name="userPwd" type="hidden" ?value="<%=userPwd %>"/>

? ? <input id="txt_htmlValue" name="txt_htmlValue" type="hidden" ?/>

? ? <input id="htmlIndex" name="htmlIndex" type="hidden" />

? </form>

? <br />

??

? <table width="350px">

? ?<tr>

? ? <td width="150px">

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

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

? ? </td>

? ? <td >

? ? ?<button onclick="addRow();">增加新行</button>&nbsp;&nbsp;

? ? ?<button onclick="createHtm();">生成htm</button>

? ? </td>

? ?</tr>

? </table>

? <div id="div_1">

? ?<TABLE id="tab_1" cellSpacing=1 cellPadding=0 width=315 border=0>

? ? <TR id="tr_head">

? ? ? ? <TD bgColor=#e3e3e3 height=16><STRONG>单位</STRONG></TD>

? ? ? ? <TD bgColor=#e3e3e3><STRONG>分数</STRONG></TD>

? ? ? ? <TD bgColor=#e3e3e3><STRONG>名次</STRONG></TD>

? ? ? ? <TD bgColor=#e3e3e3><STRONG>异动</STRONG></TD>

? ? ?<TD bgColor=#e3e3e3 width="150px"><STRONG>操作</STRONG></TD>

? ? ? <TR>

? ? ? </table>

? </div>

??

? <div id="div_new" style="visibility:hidden"> </div>

</body>

?

  相关解决方案