• 学习:用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);

            }

        }

    }

  • 相关阅读:
    用来武装Firebug的十三款Firefox插件
    五分钟搭建 Flash 视频直播站
    最新2010虎年元旦祝福短信
    Firefogg:轻松编码 OGG 视频
    winform编程DataGridView控件的使用总结
    flex实现的播放器
    flex学习笔记2
    jQuery 1.4 正式版发布
    开源路由器第三方固件openwrt衍生版xwrt
    Adobe Audition(Cool Edit)简易教程
  • 原文地址:https://www.cnblogs.com/LeimOO/p/1522749.html
Copyright © 2020-2023  润新知