jquery 删除表格列

转载

mob64ca14079fb3 2024-11-30 10:37:35

文章标签 jquery 删除表格列 html d3 弹出框 文章分类 jQuery 前端开发

HTML部分代码（表格样式）

<body>
//点击新增弹出框
<input type="button" id="increase" value="新增"/>
<div id="popup">
    <div class="top">
        <span id="span1">添加数据</span>
        <span id="span2">x</span>
    </div>

    <div class="import">
        新ID:<input type="text" id="id" placeholder="请输入ID"/>
        <br>
        名称:<input type="text" id="name"  placeholder="请输入名称"/><br>
        描述:<input type="text" id="describe" placeholder="请输入描述" />
    </div>

    <div class="bottom">
        <button id="submit" >提交</button>
    </div>
</div>
//表格样式
<table>
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>分类的ID</th>
        <th>分类的名称</th>
        <th>分类的描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码</td>
        <td><a href="test.html">修改 </a><a href="#">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公</td>
        <td><a href="test.html">修改 </a><a href="#" >删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" /></td>
        <td>3</td>
        <td>烟酒糖茶</td>
        <td>烟酒糖茶</td>
        <td><a href="test.html">修改 </a><a href="#">删除</a></td>
    </tr>


    <tr>
        <td><input type="checkbox" /></td>
        <td>4</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包</td>
        <td><a href="test.html">修改 </a><a href="#">删除</a></td>
    </tr>


    <tr>
        <td><input type="checkbox"/></td>
        <td>5</td>
        <td>汽车用品</td>
        <td>汽车用品</td>
        <td><a href="test.html">修改 </a><a href="#">删除</a></td>
    </tr>
    </tbody>
</table>
</body>

CSS部分代码（美化表格）

<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-3.3.1.js"></script>
    <title></title>
    <style>
        th, td, th {
            border: 1px solid black;
        }
        table{
            text-align: center;
        }
        .odd{
            background-color: darkgray;
        }
        #popup{
             margin:0 auto;
             background: #eef;
             width:215px;
             height:110px;
             display:none;
            float: left;
         }
        p{
            background:#999;
            cursor:pointer;
            text-align:center;
            line-height:20px;
        }
        .top {
            width: 215px;
            height: 20px;
            background-color: #ccc;
        }
        #span2{
            padding-right: 10px;
            float: right;
            cursor: pointer;
            color: red;
            background-color: black;
        }
    </style>

JQuery部分代码（设定点击事件）

<script>
   $(function () {
       //隔行换色
        $("tr:odd").addClass("odd");
        //复选框的勾选
        $("thead th:first").append("<span id='showStr'></span>");
            $("thead input:checkbox").click(function(){
                if ( $(this).prop("checked")) {
                    $("tbody input:checkbox").prop("checked", true);
                    $("#showStr").replaceWith("<span id='showStr'>已全选</span>");

                }
                else {
                    $("tbody input:checkbox").prop("checked", false);
                    $("#showStr").replaceWith("<span id='showStr'>已取消全选</span>");

                }
            });
        });
   //弹出框
   $(function(){
       //点击新增弹出
       $("#increase").click(function(){
           $("#popup").show(200);
       });
       //点击x隐藏
       $("#span2").click(function(){
           $("#popup").hide(200);
       });
   });
    //新增
   $(document).ready(function(){
       $("#submit").click(function(){
           //判断输入框是否有数据
           if($(".import #id").val()==="")
           {
               alert("输入值不能为空");
               return;
           }
           //获取新增加行数的值
           var td1=$(".import #id").val();
           var td2=$(".import #name").val();
           var td3=$(".import #describe").val();
           var tr=$("<tr></tr>");
           //新增行数的排版 并保证增加的行数与上面格式一样
           tr.html("<td><input type=\"checkbox\"/></td>" +
               "<td>"+td1+"</td>" +
               "<td>"+td2+"</td>" +
               "<td>"+td3+"</td>" +
               "<td><a href=\"test.html\">修改 </a>" +
               "<a href=\"#\">删除</a></td>");
           $("tbody").append(tr);
            //添加新增行数颜色
           $("tr:odd").addClass("odd");
           //调用删除方法 用来删除新增的行数
           bindClick();
       });
       //调用删除方法 用来删除原有的行数
       bindClick();
   });
   //设定一个删除的方法
       function bindClick(){
           $("tbody td a:last-child").click(function () {
               if(confirm(("确定是否删除"))){
                   //删除代码颜色
                   $("tr:odd").removeClass("odd");
                   $(this).parent().parent().remove();
                   //增代码颜色 保证删除行数之后还是隔行换色
                   $("tr:odd").addClass("odd");
               }
           });
       }
    </script>

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-3.3.1.js"></script>
    <title></title>
    <style>
        th, td, th {
            border: 1px solid black;
        }
        table{
            text-align: center;
        }
        .odd{
            background-color: darkgray;
        }
        #popup{
             margin:0 auto;
             background: #eef;
             width:215px;
             height:110px;
             display:none;
            float: left;
         }
        p{
            background:#999;
            cursor:pointer;
            text-align:center;
            line-height:20px;
        }
        .top {
            width: 215px;
            height: 20px;
            background-color: #ccc;
        }
        #span2{
            padding-right: 10px;
            float: right;
            cursor: pointer;
            color: red;
            background-color: black;
        }
    </style>
    <script>
   $(function () {
       //隔行换色
        $("tr:odd").addClass("odd");
        //复选框的勾选
        $("thead th:first").append("<span id='showStr'></span>");
            $("thead input:checkbox").click(function(){
                if ( $(this).prop("checked")) {
                    $("tbody input:checkbox").prop("checked", true);
                    $("#showStr").replaceWith("<span id='showStr'>已全选</span>");

                }
                else {
                    $("tbody input:checkbox").prop("checked", false);
                    $("#showStr").replaceWith("<span id='showStr'>已取消全选</span>");

                }
            });
        });
   //弹出框
   $(function(){
       //点击新增弹出
       $("#increase").click(function(){
           $("#popup").show(200);
       });
       //点击x隐藏
       $("#span2").click(function(){
           $("#popup").hide(200);
       });
   });
    //新增
   $(document).ready(function(){
       $("#submit").click(function(){
           //判断输入框是否有数据
           if($(".import #id").val()==="")
           {
               alert("输入值不能为空");
               return;
           }
           //获取新增加行数的值
           var td1=$(".import #id").val();
           var td2=$(".import #name").val();
           var td3=$(".import #describe").val();
           var tr=$("<tr></tr>");
           //新增行数的排版 并保证增加的行数与上面格式一样
           tr.html("<td><input type=\"checkbox\"/></td>" +
               "<td>"+td1+"</td>" +
               "<td>"+td2+"</td>" +
               "<td>"+td3+"</td>" +
               "<td><a href=\"test.html\">修改 </a>" +
               "<a href=\"#\">删除</a></td>");
           $("tbody").append(tr);
           //调用删除方法 用来删除新增的行数
           bindClick();
       });
       //调用删除方法 用来删除原有的行数
       bindClick();
   });
   //设定一个删除的方法
       function bindClick(){
           $("tbody td a:last-child").click(function () {
               if(confirm(("确定是否删除"))){
                   //删除代码颜色
                   $("tr:odd").removeClass("odd");
                   $(this).parent().parent().remove();
                   //增代码颜色 保证删除行数之后还是隔行换色
                   $("tr:odd").addClass("odd");
               }
           });
       }
    </script>
</head>
<body>
<input type="button" id="increase" value="新增"/>

<div id="popup">
    <div class="top">
        <span id="span1">添加数据</span>
        <span id="span2">x</span>
    </div>

    <div class="import">
        新ID:<input type="text" id="id" placeholder="请输入ID"/>
        <br>
        名称:<input type="text" id="name"  placeholder="请输入名称"/><br>
        描述:<input type="text" id="describe" placeholder="请输入描述" />
    </div>

    <div class="bottom">
        <button id="submit" >提交</button>
    </div>
</div>
<table>
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>分类的ID</th>
        <th>分类的名称</th>
        <th>分类的描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码</td>
        <td><a href="test.html">修改 </a><a href="#" class="del">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公</td>
        <td><a href="test.html">修改 </a><a href="#" class="del">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" /></td>
        <td>3</td>
        <td>烟酒糖茶</td>
        <td>烟酒糖茶</td>
        <td><a href="test.html">修改 </a><a href="#" class="del">删除</a></td>
    </tr>


    <tr>
        <td><input type="checkbox" /></td>
        <td>4</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包</td>
        <td><a href="test.html">修改 </a><a href="#"  class="del">删除</a></td>
    </tr>


    <tr>
        <td><input type="checkbox"/></td>
        <td>5</td>
        <td>汽车用品</td>
        <td>汽车用品</td>
        <td><a href="test.html">修改 </a><a href="#" class="del">删除</a></td>
    </tr>
    </tbody>
</table>
</body>
</html>