jq增加和删除行,带跨列多列的表格,请问有大神可以解答吗? - 爱问答

(爱问答)

jq增加和删除行,带跨列多列的表格,请问有大神可以解答吗?

利用JQuery实现datatables插件的增加和删除行操作:


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

    <title>zengjia he shancu </title>

    <meta charset="utf-8" />

    <script src="../jsPanel-3.5.0/jquery-3.1.1.min.js"></script>

    <script src="../DataTables/js/js/jquery.dataTables.min.js"></script>

    <link href="../DataTables/js/css/jquery.dataTables.min.css" rel="stylesheet" />

    <script type="text/javascript">

 

        $(document).ready(function () {

            $("#table").DataTable()

        });

        var i = 0;

        //添加行

        function addRow() {

            i++;

            var rowTem = '<tr class="tr_' + i + '">'

                + '<td><input type="Text" id="txt' + i + '" /></td>'

                + '<td><input type="Text" id="pwd' + i + '"/></td>'

                + '<td><a href="#" onclick=delRow('+i+') >删除</a></td>'

                + '</tr>';

           //var tableHtml = $("#table tbody").html();

           // tableHtml += rowTem;

              $("#table tbody:last").append(rowTem);

          //  $("#table tbody").html(tableHtml);

 

        }

        //删除行

        function delRow(_id) {

            $("#table .tr_"+_id).hide();

            i--;

        }

        //进行测试

        function ceshi() {

            var str1 = '';

            for( var j=1;j<=i;j++){

                var str = $("#" + "txt" + j).val();

                str1 += str;

            }

            alert(str1);

        }

    </script>

</head>

<body>

    <div style="width:500px">

        <table id="table" border="1" width="500px" class="display  hover cell-border  border-blue-1" >

            <tr width="150px">

                <th width="70px">用户名</th>

                <th width="70px">密码</th>

                <th width="30px">操作</th>

            </tr>

        </table>

    </div>

    <input type="button" value="添加行" onclick="addRow();" />

    <input type="button" value="测试数据" onclick="ceshi();" />

</body>

</html>


不知道怎么解答

相关标签:大神

下一篇:怎么打开呢?dll

上一篇:WPS设置了密码提示在哪里看

热门标签:
excel 网盘 破解 word dll
最新更新:
微软重新评估新的Outlook的使用时机 联想推出搭载联发科Helio G80芯片组的Tab M9平板 英特尔创新大赛时间确定! 微软Edge浏览器在稳定渠道中推出Workspaces功能 英伟达RTX4060TiGPU推出MaxSun动漫主题! 谷歌地图为用户提供了街景服务! GameSir 在T4 Kaleid中推出了一款出色的控制器! 微软开始在Windows 11 中测试其画图应用程序的新深色模式! LG电子推出全球首款无线OLED电视 英伟达人工智能芯片崭露头角! Steam Deck可以玩什么游戏-Steam Deck价格限时优惠 雷蛇推出CobraPro鼠标 Kindle电子阅读器可以访问谷歌商店吗 Windows10如何加入组策略 window10图片查看器怎么没有了?