<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中实现添加新行的功能啊啊,注(我还要把这些数据,当然也包括添加后的数据传到处理页中进行处理。所以还要考虑标签命名的情况,请各位前辈给看看)急急急,万分感谢啊....

解决方案 »

  1.   

    var row = prOrder.insertRow(-1);
    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
      

  2.   

    这个是增加行,
    取数据的时候通过table对象遍历去取,就不用ID了.
      

  3.   


    insertRow(-1)是追加行 (-1表示在最后面)
    row 是新追加行的这个对象
    insertCell是对当前行追加列
    rowIndex是当前行下标
    cellIndex是当前列下标
    还有不理解的吗?
      

  4.   

    insertCell是专门针对IE的 、
    要通用的话 还得按照标准的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);
      

  5.   


    前辈你能就我上面举得例子进行说明么,添加行我明白了,现在就是标签的id问题,因为我现在正在开发一个模块,行里面有很多的span,我还是不明白怎么遍历table
    麻烦您给看看,不胜感激
      

  6.   

    var tab=document.getElementById('prOrder');
    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);
    }
      

  7.   

    参考:http://www.niutuku.com/js/201008/84676/,支持ie,ff
      

  8.   

        alert(prOrder.childNodes[0].innerHTML);  //第一个tr的代码
        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里面的代码
    这样遍历
      

  9.   


    var
    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'">';前辈啊,不能在显示的innerHTML里面写上事件么??怎么不行啊
    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event()'>';
      

  10.   

    var td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'">';前辈啊,不能给显示的innerHTML里面的事件写上参数么????????加上参数就报错了
    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event("参数")'>';
      

  11.   

    table的获取tr数组然后获取td数组都可以遍历,例如取单元格:tabl.rows[i].cells[j]
      

  12.   


    前辈啊,不能给显示的innerHTML里面的事件写上参数么????????加上参数就报错了
    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event("参数")'>';
      

  13.   

    不是告诉你了莫
    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick='event(\"参数\")'>';
      

  14.   

    td.innerHTML='<input type="text" name="productsName[]" value="'+rn+'" onclick="event(\"参数\")">';
      

  15.   


    <!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>