学习:用javascript增加、删除行(转)

 

html页面代码:

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

        <title>增加Table行</title>

    </head>

    <script>

        function addRow(obj)

        {

        //添加一行

        var newTr = testTbl.insertRow();

        //添加两列

        var newTd0 = newTr.insertCell();

        var newTd1 = newTr.insertCell();

        //设置列内容和属性

        newTd0.innerHTML = '<input type=checkbox id="box4">';

        newTd1.innerText= '新加行';

        }

    </script>

    <body>

        <table id="testTbl" border=1>

            <tr id="tr1">

                <td ><input type=checkbox id="box1"></td>

                <td id="b">第一行</td>

            </tr>

            <tr id="tr2">

                <td ><input type=checkbox id="box2"></td>

                <td id="Td1">第二行</td>

            </tr>

            <tr id="tr3">

                <td ><input type=checkbox id="box3"></td>

                <td>第三行</td>

            </tr>

        </table>       

        <br />

        <input type="button" id="add" onclick="addRow();" value="Add Row" />

    </body>

</html>

javascript代码:

// JScript 文件

var num=2;

function addRow(table)

{

//    alert(table.rows.length);

    //添加一行

    var newTr = table.insertRow(table.rows.length-2);

    //添加两列

    var newTd0 = newTr.insertCell();

    var newTd1 = newTr.insertCell();

    var newTd2 = newTr.insertCell();

    var newTd3 = newTr.insertCell();

    var newTd4 = newTr.insertCell();

//    var newTd5 = newTr.insertCell();

    //设置列内容和属性

    newTd0.innerHTML = '<input type=checkbox id="checkbox1" name="checkbox1" value="'+num+'">';

    newTd1.innerHTML= '<select id="Select2" style=" 154px">'+

                        '<option selected="selected">名称</option>'+

                        '<option>时间</option>'+

                    '</select>';

    newTd2.innerHTML= '<select id="Select2">'+

                        '<option selected="selected">等于</option>'+

                        '<option>不等于</option>'+

                        '<option>包含</option>'+

                    '</select>';

    newTd3.innerHTML= '<input type="text" name="earning">';

    newTd4.innerHTML= '<select id="Select2">'+

                        '<option selected="selected">与</option>'+

                        '<option>或</option>'+

                    '</select>';

//    newTd5.innerHTML= '<input id="Button2" type="button" value="删除" onclick="del2(table1,this)" />';

}

 

 

var currRowIndex=0;

 

// 删除当前行,在每行后面跟个delete button,可以删除本行

function del(table,objTD)

{

    var objTR=objTD.parentElement.parentElement;

    currRowIndex=objTR.rowIndex;

    if(currRowIndex!='1')

    {

        table.deleteRow(currRowIndex);

        currRowIndex=0;

    }

}

 

// 勾选每行的checkbox,可以删除多行

function del2(table,objTD)

{

    var objCheckBoxs=document.getElementsByName("checkbox1");

//    alert(objCheckBoxs);

    for(var i=objCheckBoxs.length-1;i>=0;i--)

    {

        if(objCheckBoxs[i].checked)

        {

            table.deleteRow(objCheckBoxs[i].parentNode.parentNode.rowIndex);

        }

    }

}

原文地址:https://www.cnblogs.com/LeimOO/p/1522749.html