87,917
社区成员
发帖
与我相关
我的任务
分享求助：在js中动态添加表格行时，怎么动态改变每一行input的name值
<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值自动递增
...全文
请发表友善的回复…
发表回复
yong_815 2013-07-12
- 打赏
- 举报
你好，如果是通过js克隆某行后，怎么动态修改td中的input的name属性呢？
adjust4875 2013-06-22
- 打赏
- 举报
哦！知道了，可以既传递参数，又可以传递对象
<input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowSilk1(this,"+ct+")'/>
删除的时候还是按照对象删除
o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode);
太谢谢斑竹了！！！
adjust4875 2013-06-22
- 打赏
- 举报
<input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowSilk1("+ct+")'/>
function DelStructureRowSilk1(ct)
{
var structurect=document.getElementById("structureCount").value;
structurect=parseInt(structurect)-1;
var count=document.getElementById("silkcount"+ct).value; //实现丝线表计数
count=parseInt(count)-1; //点击一次-1
document.getElementById("silkcount"+ct).value=count; //
var obj=document.getElementById("silk"+ct);
ct.parentNode.parentNode.parentNode.removeChild(ct.parentNode.parentNode);
//obj.deleteRow(rowIndex);
} 
Go 旅城通票 2013-06-22
- 打赏
- 举报
<table><tr><td><input type="text" name="silkCount" id="silkcount'+count+'" value="1"></td></tr></table>
<input id="btnAddRow1" class="btn1"onclick="AddStructureRowSilk('+count+')" type="button" value="+" /></td>
id连接上count，然后你的控制对象也连接上，给AddStructureRowSilk增加当前的count，修改AddStructureRowSilk接受这个count参数，然后获取对象的时候id加上count
adjust4875 2013-06-22
- 打赏
- 举报
我只写了一个AddStructureRowSilk()函数，这个js函数是用来点击+时调用的
<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;
count=count-1;
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(this)'/>";
//var input1id=document.getElementById("trId").getElementById("count").getElementsByTagName("input")[0];
// input1id.setAttribute("name","basicBean[0].structureBeans[0].silkBeans[count].silkId");
// input1id.setAttribute("id","count1");
var id=document.getElementById("count").name;
document.getElementById("txt").value=id;
document.getElementById("txt1").value=tr.rowIndex;
}
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);
}
//End
</script> adjust4875 2013-06-22
- 打赏
- 举报
哦，知道了，还是直接按斑斑上面的回复设置就行了，但是现在的问题是，我新添加了一个表，其中也添加了
<input id="btnAddRow1" class="btn1"onclick="AddStructureRowSilk()" type="button" value="+" />
这个方法，这样添加了多个表之后，再点击这个+的button调用这个方法就会没作用了，是不是需要把AddStructureRowSilk()函数也用innerHTML添加，然后给上对应的count序号呢？
adjust4875 2013-06-22
- 打赏
- 举报
我现在用innerHTML直接产生新的表格
<span id=q></span>
<script language=javascript>
function z()
{
var count=document.getElementById("structureCount").value;
count=parseInt(count);
q.innerHTML=q.innerHTML+
'<table><tr><td><input type="text" name="silkCount" id="silkcount" value="1"></td></tr></table>'
+'<table class="tableStyle" id="silk0"><tr><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" ></td>'
+'<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkWarpOrWeft" ></td>'
+'<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkType" ></td>'
+'<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkDensity"></td>'
+'<td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkColor"><input id="btnAddRow1" class="btn1"onclick="AddStructureRowSilk()" type="button" value="+" /></td>'
+'</tr></table>'
document.getElementById("structureCount").value=count+1;
var id=document.getElementById("silkcount0").value;
document.getElementById("txt").value=id;
}
</script>
<input value="生成表格" onclick=z() type=button> Go 旅城通票 2013-06-21
- 打赏
- 举报
不用clone吧，直接设置容器的innerHTML就行了
clone的话会把行什么的都一起复制了。你还得删除掉行
while(table.childNodes.length>0)table.removeChild(table.childNodes[0]);
adjust4875 2013-06-21
- 打赏
- 举报
还想麻烦一下斑竹呀，我现在在做一个多层的表格，比如第一层有一个表1，表2，表1表2都可以添加多行，就上上面的表格，请问，我怎么用js添加多个表1，表2，比如点击添加按钮，在原有的表1，表2的下面再添加一个新的表1，表2. 我原来是用的是table.cloneNode,完全复制上面的表，这样做上面的表1，表2添加的行，也直接复制到新的表1，表2中了。就是想做到添加一个新的表1，表2，行数没变过。
<script>
function copyTable(){
var count=document.getElementById("structureCount").value;
count=parseInt(count);
var fromtb0=document.getElementById("structure0"); //复制组织结构表
var newtb0 = fromtb0.cloneNode(true);
var fromtb1 = document.getElementById("structureparameter0");
var fromtb2=document.getElementById("silk0");
var div = document.getElementById("todiv");
var newtb1 = fromtb1.cloneNode(true);
var newtb2 = fromtb2.cloneNode(true);
newtb0.setAttribute("id","structure"+count);
div.appendChild(newtb0);
newtb1.setAttribute("id","structureparameter"+count);
newtb1.setAttribute("class","tableStyle");
div.appendChild(newtb1);
newtb2.setAttribute("id","silk"+count);
newtb2.setAttribute("class","tableStyle");
div.appendChild(newtb2);
var fromtb3=document.getElementById("structureparametercountTable0"); //为组织参数表个数计数
var newtb3=fromtb3.cloneNode(true);
newtb3.setAttribute("id","structureparametercountTable"+count);
div.appendChild(newtb3);
var inputid=document.getElementById("structureparametercountTable"+count).getElementsByTagName("input")[0];
inputid.setAttribute("id","structureparametercount"+count);
var fromtb4=document.getElementById("silkcountTable0"); //为丝线表个数计数
var newtb4=fromtb4.cloneNode(true);
newtb4.setAttribute("id","silkcountTable"+count);
div.appendChild(newtb4);
var inputid=document.getElementById("silkcountTable"+count).getElementsByTagName("input")[0];
inputid.setAttribute("id","silkcount"+count);
document.getElementById("structureCount").value=count+1;
}
function delTable(){
var count=document.getElementById("structureCount").value;
count=parseInt(count)-1;
//var counttable=document.getElementById("structureCount").value;
var delform0=document.getElementById("structure"+count); //删除组织结构表
var deldiv0=document.getElementById("todiv");
deldiv0.removeChild(delform0);
var delform1=document.getElementById("structureparameter"+count); //删除组织参数表
var deldiv1=document.getElementById("todiv");
deldiv1.removeChild(delform1);
var delform2=document.getElementById("silk"+count);
var deldiv2=document.getElementById("todiv");
deldiv2.removeChild(delform2);
var delform3=document.getElementById("structureparametercountTable"+count);//删除参数计数表
var deldiv3=document.getElementById("todiv");
deldiv3.removeChild(delform3);
var delform4=document.getElementById("silkcountTable"+count);//删除丝线计数表
var deldiv4=document.getElementById("todiv");
deldiv4.removeChild(delform4);
document.getElementById("structureCount").value=count;
}
</script>Go 旅城通票 2013-06-21
- 打赏
- 举报
我给你的就是删除行的了
adjust4875 2013-06-21
- 打赏
- 举报
o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode)
原来这样就行了！斑斑就是不一样啊！太感谢了
adjust4875 2013-06-21
- 打赏
- 举报
请问是怎么按对象删除的呢？我是想删除一整行，不是删除一个input，是按行的对象删除吗
Go 旅城通票 2013-06-21
- 打赏
- 举报
没看到其他的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);
}adjust4875 2013-06-21
- 打赏
- 举报
大神们，再请教一个问题，
我这里面添加多个表格行，点击+按钮添加一行，我同时写了一个js函数，点击-删除一行，但是删除的时候是直接删除最后一行的，不管点哪一行的删除都是删除最后一行，求问怎么实现选择删除哪一行就删除那一行呢？
这是删除的js代码
function DelStructureRowSilk(rowIndex)
{
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);
obj.deleteRow(rowIndex);
} adjust4875 2013-06-21
- 打赏
- 举报
嗯，是的，我一直没想明白计数的count怎么用
adjust4875 2013-06-21
- 打赏
- 举报
太谢谢了！一直不知道我这两个计数怎么直接在innerHTML中怎么用，原来直接td0.innerHTML = "<input type='text' id='count' name='basicBean[0].structureBeans["+structurect+"].silkBeans["+count+"].silkId' > ";这样就可以了
Go 旅城通票 2013-06-21
- 打赏
- 举报
var structurect=document.getElementById("structureCount").value; structurect=parseInt(structurect)-1;
var count=document.getElementById("silkcount"+structurect).value;
count=parseInt(count)+1;
你不是获得这个2个变量的值了，那不就直接连接起来就好了。。
td0.innerHTML = "<input type='text' id='count' name='basicBean[0].structureBeans["+structurect+"].silkBeans["+count+"].silkId' > ";
rencht 2013-06-21
- 打赏
- 举报
写个变量记录count，然后在AddStructureRowSilk方法中添加input时name的生成从变量读取
