<table id="prOrder">
<tr>
<td><input type='text' id="productsName" name="productsName[]"></td>
<td><input type='text' id="productsCount" name="productsCount[]"></td>
<td><span id="productsPrice" name="productsPrice"></span></td>
</tr>
</table>
<input type="button" value="提交表单"><a href="#">添加新的一行</a>如何在js中实现添加新行的功能啊啊,注(我还要把这些数据,当然也包括添加后的数据传到处理页中进行处理。所以还要考虑标签命名的情况,请各位前辈给看看)急急急,万分感谢啊....
<tr>
<td><input type='text' id="productsName" name="productsName[]"></td>
<td><input type='text' id="productsCount" name="productsCount[]"></td>
<td><span id="productsPrice" name="productsPrice"></span></td>
</tr>
</table>
<input type="button" value="提交表单"><a href="#">添加新的一行</a>如何在js中实现添加新行的功能啊啊,注(我还要把这些数据,当然也包括添加后的数据传到处理页中进行处理。所以还要考虑标签命名的情况,请各位前辈给看看)急急急,万分感谢啊....
row.id = "id";
var cell1 = row.insertCell();
var cell1 = row.insertCell();
var cell1 = row.insertCell();
提醒一下 给TD加上ID是多余的
什么都可以通过Table遍历出来 加上ID处理反而更为繁琐
如何遍历?
prOrder.row[i].rowIndex
prOrder.cell[i].cellIndex
取数据的时候通过table对象遍历去取,就不用ID了.
insertRow(-1)是追加行 (-1表示在最后面)
row 是新追加行的这个对象
insertCell是对当前行追加列
rowIndex是当前行下标
cellIndex是当前列下标
还有不理解的吗?
要通用的话 还得按照标准的Dom操作createElement
var tab=document.getElementById('prOrder');
var rn=tab.rows.length;
var row=tab.insertRow(-1); var td=document.createElement('td');
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'">';
row.appendChild(td);
td=document.createElement('td');
td.innerHTML='<input type="text" name="productsCount[]">';
row.appendChild(td);
td=document.createElement('td');
td.innerHTML='<span name="productsPrice"></span>';
row.appendChild(td);
前辈你能就我上面举得例子进行说明么,添加行我明白了,现在就是标签的id问题,因为我现在正在开发一个模块,行里面有很多的span,我还是不明白怎么遍历table
麻烦您给看看,不胜感激
var row,td;
for(var i=0,l=tab.rows.length;i<l;i++){
row=tab.rows[i];
td=row.getElementsByTagName('td')[2];
alert(td.innerHTML);
}
alert(prOrder.childNodes[0].childNodes[0].innerHTML);//第一个tr的第一个td的代码
alert(prOrder.childNodes[0].childNodes[0].childNodes[0].innerHTML);//...span的代码
alert(searchList.childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML);//...span里面的代码
这样遍历
var
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'">';前辈啊,不能在显示的innerHTML里面写上事件么??怎么不行啊
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event()'>';
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event("参数")'>';
前辈啊,不能给显示的innerHTML里面的事件写上参数么????????加上参数就报错了
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event("参数")'>';
td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event(\"参数\")'>';
<!DOCTYPE html>
<html>
<head>
<title></title>
<matadata charset="utf-8">
</head>
<body>
<table id="prOrder">
<tr>
<td><input type='text' id="productsName" name="productsName[]"></td>
<td><input type='text' id="productsCount" name="productsCount[]"></td>
<td><span id="productsPrice" name="productsPrice">money</span></td>
</tr>
</table>
<input type="button" value="ok"><a href="#">insert row</a>
<script>
var table = document.getElementById("prOrder");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("id","first");
cell1.appendChild(input);
var cell2 = row.insertCell(1);
cell2.innerHTML = "second";
var cell3 = row.insertCell(2);
cell3.innerHTML = "third";
</script>
</body>
</html>