动态表格增删功能实现-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格相关</title>

    <script language="javascript" type="text/javascript">
function add_row()
{
    var tableobj=document.getElementById("table_1");
    var tableRowLength = tableobj.rows.length;
    var rowobj=tableobj.insertRow(tableobj.rows.length);

    var cell1=rowobj.insertCell(rowobj.cells.length);
    var cell2=rowobj.insertCell(rowobj.cells.length);
    var cell3=rowobj.insertCell(rowobj.cells.length);

//    var cell1Value = document.getElementById('name').value;
//    var cell2Value = document.getElementById('pass').value;


    cell1.innerHTML="<input name='name' id='name' type='hidden' value = Row"+(tableRowLength+1)+"/><br /><input name='nameRow'"+(tableRowLength+1)+" id='nameRow'"+tableRowLength+" type='text' />";
    cell2.innerHTML="<input name='passRow'"+(tableRowLength+1)+" id='passRow'"+(tableRowLength+1)+" type='text' />";
    cell3.innerHTML="<input type='button' value='取消' οnclick='delete_row("+(tableobj.rows.length-1)+");'>";

//    document.getElementById("name").value="";
//    document.getElementById("pass").value="";
}

function delete_row(i)
{
    var tableobj=document.getElementById("table_1");
    tableobj.deleteRow(i);

        //当删除一行后，对各行重新建立索引
    var tableobj=document.getElementById("table_1");
    for(i=1;i<tableobj.rows.length;i++)
    {
        tableobj.rows[i].cells[2].innerHTML="<input type='button' value='取消' οnclick='delete_row("+i+");'>";
    }
}

    </script>

</head>
<body>
    <div align="center">

        <input name="add" type="button" οnclick="JavaScript:return add_row();" value="新增一行" />
    </div>
    <div align="center">
        <table id="table_1" border="1">
            <tr>
                <td>
                    帐号</td>
                <td>
                    密码</td>
                <td>
                    操作</td>
            </tr>
        </table>
    </div>
</body>
</html>

动态增加表格行