求助：在js中动态添加表格行时，怎么动态改变每一行input的name值

Question

本帖最后由 adjust4875 于 2013-06-20 22:31:35 编辑

Answer 1

写个变量记录count，然后在AddStructureRowSilk方法中添加input时name的生成从变量读取

Answer 2

 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' > ";               

Answer 3

太谢谢了！一直不知道我这两个计数怎么直接在innerHTML中怎么用，原来直接td0.innerHTML = "<input type='text' id='count' name='basicBean[0].structureBeans["+structurect+"].silkBeans["+count+"].silkId' > ";这样就可以了

Answer 4

嗯，是的，我一直没想明白计数的count怎么用

Answer 5

大神们，再请教一个问题，
我这里面添加多个表格行，点击+按钮添加一行，我同时写了一个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); 

} 

Answer 6

没看到其他的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);    } 

Answer 7

请问是怎么按对象删除的呢？我是想删除一整行，不是删除一个input，是按行的对象删除吗

Answer 8

 o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode)
原来这样就行了！斑斑就是不一样啊！太感谢了

Answer 9

还想麻烦一下斑竹呀，我现在在做一个多层的表格，比如第一层有一个表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>

Answer 10

不用clone吧，直接设置容器的innerHTML就行了clone的话会把行什么的都一起复制了。你还得删除掉行
while(table.childNodes.length>0)table.removeChild(table.childNodes[0]);

Answer 11

我现在用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> 
我也设置了计数count，请问我怎么让我每次新产生的表格
<table><tr><td><input type="text" name="silkCount" id="silkcount" value="1"></td></tr></table>
它的id  silkcountX，X为count计数值，怎么使用这个count？
同样的在<tr id="SilkRight"><td><input type="text" name="basicBean[0].structureBeans[0].silkBeans[0].silkId" ></td>中，怎么是silkBeans[0]中的0按count计数？谢谢了

Answer 12

哦，知道了，还是直接按斑斑上面的回复设置就行了，但是现在的问题是，我新添加了一个表，其中也添加了
<input id="btnAddRow1" class="btn1"onclick="AddStructureRowSilk()" type="button" value="+" />
这个方法，这样添加了多个表之后，再点击这个+的button调用这个方法就会没作用了，是不是需要把AddStructureRowSilk()函数也用innerHTML添加，然后给上对应的count序号呢？

Answer 13

我只写了一个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> 
但是，我现在添加多个表之后，每个表在添加行的时候，都会点击+来调用这个js函数，这时是对最新创建的表进行操作，请问怎么才能做到我点击某一个表下面的+，只对该表进行操作，使其添加一行。这是动态添加问题，求大神解答呀

Answer 14

<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

Answer 15

<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); 

} 
请问我想把删除也做成对应的删除，但是这样传参数没用？这里ct是一个计数，
ct.parentNode.parentNode.parentNode.removeChild(ct.parentNode.parentNode)
这样按对象删除没有效果，点击-不会删除这一行。求教，谢谢了

Answer 16

哦！知道了，可以既传递参数，又可以传递对象
<input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowSilk1(this,"+ct+")'/>
删除的时候还是按照对象删除
o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode);
太谢谢斑竹了！！！

Answer 17

你好，如果是通过js克隆某行后，怎么动态修改td中的input的name属性呢？