zoukankan      html  css  js  c++  java
  • 学习:用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);

            }

        }

    }

  • 相关阅读:
    前nginx后Apache+Node反向代理
    JavaScript面试时候的坑洼沟洄——逗号、冒号与括号
    JavaScript面试时候的坑洼沟洄——表达式与运算符
    JavaScript面试时候的坑洼沟洄——数据类型
    容易被忽略CSS特性
    常用CSS优化总结——网络性能与语法性能建议
    quic-go测试
    golang证书认证通信
    golang爬虫
    websocket概述
  • 原文地址:https://www.cnblogs.com/LeimOO/p/1522749.html
Copyright © 2011-2022 走看看