Question

javascript 数组innerHTML问题

我想求教一下，就是如何才能使得js追加的数组数据传到后台时不与table数组冲突，例如下面table数组传递数据位single[0].id,single[0].name,single[1].id,single[1].name，那么追加的数组就应该从single[2].id,single[2].name开始传递，这样才能使数据不冲突，但是这个如何实现呢？求哪位大神帮忙解答下哈，感谢！！！下面附上代码：
<script type="text/javascript">
function addTr(value) {
var otable = document.getElementById("table1");
for ( var i = 0, len = value.length; i < len; i++) {
var temp = value[i].split("#");
var myTR = otable.insertRow(otable.rows.length);
var myTD1 = myTR.insertCell(0);
myTD1.innerHTML = "<input type='text' id='mid' readonly='readonly' name='singles["+j+"].id' value="+temp[0]+">";
var myTD2 = myTR.insertCell(1);
myTD2.innerHTML = "<input type='text' readonly='readonly' name='singles["+j+"].name' value="+temp[2]+">";
j++;} }
</script>
页面table显示代码

<table class="list" width="100%" id="table1">
<thead>
<tr><th>编号</th> <th>名称</th></tr>
<c:forEach items="${bill.billTbody}" var="bt" varStatus="stauts"><tr >
<td><input type="text" name="singles[${stauts.index }].id" value="${bt.mid.mid}"></td> <td><input type="text" value="bt.mid.name"></td></tr> </c:forEach></thead>
<tbody>
</tbody>
</table>
求别复制粘贴啊！！！

Answer 1

发现问题所在了，因为你的Div写的不对。

你的DIV结构如下：
<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
</div>

通过document.getElementsByTagName("div")取到的对象有5个，而不是你期待的4个
temp[0] 其实等于 在外层的那个Div，因此上 temp[0].innerHTML += "append"; 已经把
整个第一层Div内部的元素全部改变了，成为以下：

<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
append
</div>

再往下的循环 temp[1] - temp[4] 实际上在页面上已经不存在了（在你保存的数组中存在，但是和页面上的不再是同一个Dom对象了），所以画面的表象就成了上面的样子，好像只累加第一个似的。如果去掉外面的那个Div，有以下的结果：

<div>AAAappend</div>
<div>BBBappend</div>
<div>CCCappend</div>
<div>DDDappend</div>

Answer 2

addTr函数里的j变量不知道在哪定义的，如果是全局的，可以把j初始化为forEach循环的数量，这样下一次调用j的时候，就是下一个索引值了。

否则可以直接在函数里直接用otable.rows.length的值就行了，name='singles["+otable.rows.length+"].id'

追问

那请问下如何在foreach循环之外获取循环次数呢？

追答

el表达式我不太懂啊。。。不过可以直接在表格后面用js获取到表格的行数

</table>
<script>
var j=table1.rows.length;
</script>