点击按钮，添加文本框并实现删除、全选功能

最新推荐文章于 2021-03-15 02:26:36 发布

小红花程序员

最新推荐文章于 2021-03-15 02:26:36 发布

阅读量861

点赞数

分类专栏： java jsp 文章标签： jsp

本文链接：https://blog.csdn.net/Alone_IT/article/details/84375635

版权

java 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

jsp

1 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title></title>
    <script>
        var rows = 1;
        function addrows() {
            var trElement = document.createElement("tr");
            var td1Element = document.createElement("td");
			var td5Element = document.createElement("td");
			var td6Element = document.createElement("td");
            var td2Element = document.createElement("td");
            var td3Element = document.createElement("td");
            var td4Element = document.createElement("td");
            td1Element.innerHTML="<input type='checkbox' value='1' name='chk'>"+rows;
			td5Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";
			td6Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";
            td2Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";
            td3Element.innerHTML="<input type='password' value='' required name='password' class='form-control'>";
            td4Element.innerHTML="<input type='button' value='删除' class='btn btn-danger' onclick='delrow(this)'>";
            
            trElement.appendChild(td1Element);
			trElement.appendChild(td5Element);
			trElement.appendChild(td6Element);
            trElement.appendChild(td2Element);
            trElement.appendChild(td3Element);
            trElement.appendChild(td4Element);
            
            var tbody = document.getElementById("tb");
            tbody.appendChild(trElement);
            rows++;
        }
        function delrow(obj){
            //获取按钮所在的行
            btnTrElement = obj.parentNode.parentNode;
            //alert(btnTrElement.nodeName);
            //获取按钮所在的行的上一级也就是TBODY
            tbodyElemement = btnTrElement.parentNode;
            //通过tobody干掉tr
            tbodyElemement.removeChild(btnTrElement);
        }
    </script>
</head>

<body>
    <form>
        <table class="table table-responsive table-striped" id="table">
            
            <thead>
				 <th>序号</th>
                <th>物流公司</th>
                <th>重量（/吨）</th>
                <th>车数（/辆）</th>
                <th>运费（/元）</th>
            </thead>
            <tbody id="tb">
                <!--
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>-->
            </tbody>
            <tfoot>
                <tr>
                    <td align="center" colspan="4">
                        <button class="btn btn-success" onclick="qx()">全选</button>&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-warning" onclick="fx()">反选</button>&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-danger" onclick="qbx()">全不选</button>&nbsp;&nbsp;&nbsp;
                        <input  class="btn btn-info" type="submit" value="哦了提交">
                        <button class="btn btn-primary" onclick="addrows()">添加一行</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </form>
    <script>
        function qx(){
            //获取所有的checkbox
            var checkbox = document.getElementsByName("chk");
            //遍历所有的checkbox
            for (var i=0;i<checkbox.length;i++) {
                checkbox[i].checked=true;
            }
        }
        function fx(){
            //获取所有的checkbox
            var checkbox = document.getElementsByName("chk");
            //遍历所有的checkbox
            for (var i=0;i<checkbox.length;i++) {
                checkbox[i].checked=!checkbox[i].checked;
            }
        }
        function qbx(){
            //获取所有的checkbox
            var checkbox = document.getElementsByName("chk");
            //遍历所有的checkbox
            for (var i=0;i<checkbox.length;i++) {
                checkbox[i].checked=false;
            }
        }
    </script>
</body>

小红花程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
点击按钮，添加文本框并实现删除、全选功能

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /&gt; &lt;script type="text/javascript" src="js/jquery-
复制链接

扫一扫