动态添加多行

时间:2013-02-26 10:56:01

标签: javascript

这是我的代码示例.. 从示例中,我有两行.. 我想要做的是,我想动态添加两行.. 谢谢

<table id="datatable">
    <tr>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td><input type="text" /></td>
    </tr>
</table> 
<button type="button" id="add" onclick="addRow('dataTable')">
    <b>Add</b>
</button>
function addRow(tableID) {
    alert('ttt');
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}

jsfiddle example

3 个答案:

答案 0 :(得分:2)

试试这个:

HTML

<table id="datatable">
       <tr>
        <td><input type="text"  /></td>
       </tr>
       <tr>
        <td><input type="text"  /></td>
       </tr>
     </table> 

<button type="button" id="add" onclick="addRow('dataTable')">
        <b>Add</b>
 </button>

JS

 $(document).ready(function() {
    $('#add').click(function(){ 
        $('#datatable').append(' <tr> <td>Account No</td> <td>:</td> <td colspan="2"><input size="20" type="text" /></td> <td>Bill No</td> <td>:</td> <td><input type="text" /></td> </tr> <tr> <td>Name</td> <td>:</td> <td colspan="2"><input type="text" /></td> <td>Bill date</td> <td>:</td> <td><input type="text" /></td> </tr>');
}); 
});

小提琴:http://jsfiddle.net/zLXmQ/4/

答案 1 :(得分:0)

只是浏览并想指出您的表id-是数据表,您的参数是dataTable。希望那是相关的

答案 2 :(得分:0)

只需你可以这样做:

function addRow(tableId)
{
  $('#' + tableId + ' tr:last').after('<tr><td>Enter You New Row Data Here..</td></tr>');
}

有关详细信息,请查看以下内容:Add table row in jQuery