读书人

在js中动态添加表格行时如何动态改变

发布时间: 2013-07-09 09:50:47 作者: rapoo

求助:在js中动态添加表格行时,怎么动态改变每一行input的name值
本帖最后由 adjust4875 于 2013-06-20 22:31:35 编辑

<table class="tableStyle" id="silk0">
<tr>
<%-- <td width="5%" rowspan="2" id="SilkLeft">组织丝线表</td>--%>

<td width="10%">丝线序号</td>

<td width="10%">丝线经纬</td>
<td width="10%">丝线类型</td>
<td width="10%">丝线密度</td>
<td width="10%">丝线描述</td>
</tr>
<tr id="SilkRight">
<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkId" value="<%=b0s0s0silkId%>"></td>

<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkWarpOrWeft" value="<%=b0s0s0silkWarpOrWeft%>"></td>
<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkType" value="<%=b0s0s0silkType%>"></td>
<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkDensity" value="<%=b0s0s0silkDensity%>"></td>
<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkColor" value="<%=b0s0s0silkColor%>"><input id="btnAddRow1" class="btn1"
onclick="AddStructureRowSilk()" type="button" value="+" /></td>
</tr>

</table>


<script language="javascript" type="text/javascript"> 
//表单操作
function AddStructureRowSilk()
{
var structurect=document.getElementById("structureCount").value; //取得添加组织结构表的个数
structurect=parseInt(structurect)-1; //转成int型
var count=document.getElementById("silkcount"+structurect).value; //实现组织参数表计数

count=parseInt(count)+1; //点击一次+1
document.getElementById("silkcount"+structurect).value=count;
var obj=document.getElementById("silk"+structurect);
var tr= obj.rows["SilkRight"];
//alert(tr.rowIndex);
//var count=document.getElementById("SilkLeft").getAttribute("rowspan");
//document.getElementById("SilkLeft").setAttribute("rowSpan",parseInt(count)+1);
//alert(count);

//document.getElementById("silkcount1").value=count;
//插入行 code form www.jb51 .net
var tr =obj.insertRow(tr.rowIndex+1);
var trId="trStructure"+tr.rowIndex;
tr.setAttribute("id",trId);

//<s:set var="ct" value="1"/>

var td0 = tr.insertCell(0);
td0.setAttribute("align","left");


td0.innerHTML = "<input type='text' id='count' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkId' > ";

var td1 = tr.insertCell(1);
td1.setAttribute("align","left");
td1.innerHTML = "<input type='text' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkWarpOrWeft'>";
var td2 = tr.insertCell(2);
td2.setAttribute("align","left");
td2.innerHTML = "<input type='text' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkType'>";
var td3 = tr.insertCell(3);
td3.setAttribute("align","left");
td3.innerHTML = "<input type='text' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkDensity'>";
var td4 = tr.insertCell(4);
td4.setAttribute("align","left");
td4.innerHTML = "<input type='text' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkColor'><input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowSilk("+tr.rowIndex+")'/>";

//var input1id=document.getElementById("count").getElementsByTagName("input")[0];
//input1id.setAttribute("name","basicBean[0].structureBeans[0].silkBeans[count].silkId");
//input1id.setAttribute("id","count");
var id=document.getElementById("count").name;
document.getElementById("txt").value=id;
}



其中的<input type='text' id='count' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkId' >structurect和count是计数,可是我这么写input的name值不会自动改变,求问我点击添加按钮,能够让新添加的行的input的name值自动递增
[解决办法]
写个变量记录count,然后在AddStructureRowSilk方法中添加input时name的生成从变量读取
[解决办法]
没看到其他的HTML代码,改为按照DOM关系删除应该没问题。。。

td4.innerHTML = "<input type='text' name='basicBean[0].structureBeans[structurect].silkBeans[count].silkColor'>"
+"'<input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowSilk(this)'/>";


function DelStructureRowSilk(o) {
var structurect = document.getElementById("structureCount").value;
structurect = parseInt(structurect) - 1;
var count = document.getElementById("silkcount" + structurect).value; //实现丝线表计数

count = parseInt(count) - 1; //点击一次-1


document.getElementById("silkcount" + structurect).value = count; //
var obj = document.getElementById("silk" + structurect);
o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode)
//obj.deleteRow(rowIndex);

}

读书人网 >JavaScript

热点推荐