JQuery表格的新增与删除，隔行换色以及复选框全部勾选

最新推荐文章于 2023-05-29 09:49:05 发布
最新推荐文章于 2023-05-29 09:49:05 发布
阅读量220 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stray_0212/article/details/110962341
版权

HTML部分

表格，以及新增的表单

<!--点击新增按钮-->
<div><input type="button" value="新增分类"/></div>

<!--表格-->
<table>
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>编号</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="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>香蕉</td>
        <td>香蕉</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>梨</td>
        <td>梨</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>橘子</td>
        <td>橘子</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>5</td>
        <td>西瓜</td>
        <td>西瓜</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    </tbody>
</table>

<!--新增表单-->
<div id="insert_div">
    <form>
        <table>
            <tr><td>编号</td><td><input type="text"/></td></tr>
            <tr><td>名称</td><td><input type="text"/></td></tr>
            <tr><td>描述</td><td><input type="text"/></td></tr>
            <tr><td colspan="2"><input type="button" value="完成"/><input type="reset" value="重置"/><input type="button" value="隐藏"/></td></tr>
        </table>
    </form>
</div>

css部分

美化表格

    table,tr,th,td{
        border: solid 1px black;
        border-collapse: collapse;
    }
    th,td{
        width: 120px;
        height: 25px;
    }
    .odd{
        background-color: #FDF18D;
    }
    table{
        margin: 0 auto;
    }
    div{
        width: 600px;
        margin: 0 auto;
    }
    /*新增表单默认隐藏*/
    #insert_div{
        display: none;
    }

jquary部分

隔行换色以及复选框全部勾选

        //隔行换色
        $("table:first tr:odd").addClass("odd");

        $("th:first").append("<span></span>");

        //全选|全不选
        $("th:first input:checkbox").click(function(){
            if($(this).prop("checked")) {
                $("td input:checkbox").prop("checked", true);
                $("span").text("已全选");
            }else{
                $("td input:checkbox").prop("checked", false);
                $("span").text("已取消全选");
            }
        });
        //添加
        //点击新增按钮，显示输入框
        $("div:first input:button").click(function(){
           $("#insert_div").show();
        });
        //点击添加
        $("div:last input:button:first").click(function(){
            var id = $("div:last input:text:eq(0)").val();
            var name = $("div:last input:text:eq(1)").val();
            var describe = $("div:last input:text:eq(2)").val();

            if(id.length>0&&name.length>0&&describe.length){
                $("table:first").append('<tr> <td><input type="checkbox"/></td> <td></td> <td></td> <td></td> <td><a href="#">修改</a> | <a href="#">删除</a></td> </tr>');
                $("table:first tr:last td").eq(1).append(id);
                $("table:first tr:last td").eq(2).append(name);
                $("table:first tr:last td").eq(3).append(describe);
                $(":text").val("");

            }else {
                alert("请输入完整！");
            }
            $("table:eq(0) tr:odd").addClass("odd");

        });
        //隐藏输入框
        $("div:last input:button:last").click(function(){
            $("#insert_div").hide();
        });
        //删除
        $("table:first").on("click","a:last-child",function(){
           if(confirm("是否删除？")){
               $("table:eq(0) tr:odd").removeClass("odd");

               $(this).parents("tr").remove();

               $("table:eq(0) tr:odd").addClass("odd");

           }

        });

全部代码

注意添加jquary插件，这里我用的是jquery-3.3.1.js，jquary插件下载

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="js/jquery-3.3.1.js"></script>
<style>
    table,tr,th,td{
        border: solid 1px black;
        border-collapse: collapse;
    }
    th,td{
        width: 120px;
        height: 25px;
    }
    .odd{
        background-color: #FDF18D;
    }
    table{
        margin: 0 auto;
    }
    div{
        width: 600px;
        margin: 0 auto;
    }
    /*新增表单默认隐藏*/
    #insert_div{
        display: none;
    }
</style>
<script>
    $(function(){
        //隔行换色
        $("table:first tr:odd").addClass("odd");

        $("th:first").append("<span></span>");

        //全选|全不选
        $("th:first input:checkbox").click(function(){
            if($(this).prop("checked")) {
                $("td input:checkbox").prop("checked", true);
                $("span").text("已全选");
            }else{
                $("td input:checkbox").prop("checked", false);
                $("span").text("已取消全选");
            }
        });
        //添加
        //点击新增按钮，显示输入框
        $("div:first input:button").click(function(){
           $("#insert_div").show();
        });
        //点击添加
        $("div:last input:button:first").click(function(){
            var id = $("div:last input:text:eq(0)").val();
            var name = $("div:last input:text:eq(1)").val();
            var describe = $("div:last input:text:eq(2)").val();

            if(id.length>0&&name.length>0&&describe.length){
                $("table:first").append('<tr> <td><input type="checkbox"/></td> <td></td> <td></td> <td></td> <td><a href="#">修改</a> | <a href="#">删除</a></td> </tr>');
                $("table:first tr:last td").eq(1).append(id);
                $("table:first tr:last td").eq(2).append(name);
                $("table:first tr:last td").eq(3).append(describe);
                $(":text").val("");

            }else {
                alert("请输入完整！");
            }
            $("table:eq(0) tr:odd").addClass("odd");

        });
        //隐藏输入框
        $("div:last input:button:last").click(function(){
            $("#insert_div").hide();
        });
        //删除
        $("table:first").on("click","a:last-child",function(){
           if(confirm("是否删除？")){
               $("table:eq(0) tr:odd").removeClass("odd");

               $(this).parents("tr").remove();

               $("table:eq(0) tr:odd").addClass("odd");

           }

        });

    });
</script>
<body>
<!--点击新增按钮-->
<div><input type="button" value="新增分类"/></div>

<!--表格-->
<table>
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>编号</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="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>香蕉</td>
        <td>香蕉</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>梨</td>
        <td>梨</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>橘子</td>
        <td>橘子</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>5</td>
        <td>西瓜</td>
        <td>西瓜</td>
        <td><a href="#">修改</a> | <a href="#">删除</a></td>
    </tr>
    </tbody>
</table>

<!--新增表单-->
<div id="insert_div">
    <form>
        <table>
            <tr><td>编号</td><td><input type="text"/></td></tr>
            <tr><td>名称</td><td><input type="text"/></td></tr>
            <tr><td>描述</td><td><input type="text"/></td></tr>
            <tr><td colspan="2"><input type="button" value="完成"/><input type="reset" value="重置"/><input type="button" value="隐藏"/></td></tr>
        </table>
    </form>
</div>
</body>
</html>
不想人间见白头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现添加删除表格
qq_48294048的博客
10-04 1901
css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box;
Jquery 表格制作 编辑、删除 、添加功能
清风且从容，何需念君安。
05-26 1303
【代码】Jquery 表格制作 编辑、删除 、添加功能。
jQuery-表中数据的添加与删除
heliuerya的博客
05-29 972
/appendTo() 比如：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素。const flag = confirm("确认删除--->" + name + "<---的信息吗？//confirm()在弹窗中用户点击确定按钮返回true，用户点击取消按钮返回false。//append() 比如：x.append(y) 在x元素中添加y元素。//"td:eq(0)"表示第一个td元素。//text()获取指定元素的文本内容。//$(this)表示鼠标单击的元素。
jQuery表格添加删除记录
m0_51435825的博客
12-11 286
jQuery表格添加删除记录
Jquery实现表格的增加与删除案例
量子前端的博客
09-19 1638
这是一个通过浮动窗口添加课程信息（一条tr）的小功能，界面如图所示，点击添加数据会出现新窗口。 jquery中的事件全部都是click事件，分别是添加数据、添加课程、关闭添加课程窗口和GET按钮四个事件。 代码：~~~~~~~~~~~~~ <body> <button id = 'btn'>添加数据</button> <div id = 'dv1'> <table> <tr style = 'background-color
jquery实现带复选框的表格行选中删除时高亮显示
12-12
本示例展示了如何利用jQuery实现一个带复选框的表格，使得在选中或删除表格行时能够高亮显示，提升用户体验。下面将详细解释实现这两个功能的关键步骤和涉及的jQuery语法。 首先，我们需要一些基本的HTML结构，包含...
jquery实现表格隔行换色效果
10-23
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下
jQuery实现表格隔行换色
10-18
本篇文章将详细讲解如何使用 jQuery 实现表格隔行换色，以及涉及的相关知识点。 首先，我们来看下实现隔行换色的核心代码： ```javascript $(function() { // 隔行换色 $("tbody tr:odd").css("background-color...
jquery实现勾选复选框触发事件给input赋值
12-09
在本文中，我们将深入探讨如何使用jQuery来实现一个功能，即当用户勾选或取消复选框时，自动为关联的input元素赋值。这个功能对于数据输入和管理的交互界面非常有用，可以帮助用户快速地处理多选列表，并将选择的...
基于Jquery的表格隔行换色，移动换色，点击换色插件
12-02
在本文中，我们将深入探讨基于Jquery的表格隔行换色、移动换色以及点击换色的实现方式，这涉及到Jquery插件的编写和应用。Jquery是一种强大的JavaScript库，它简化了DOM操作，事件处理，动画效果，以及Ajax交互，而...
JS/jQuery实现超简单的Table表格添加,删除行功能示例
10-16
主要介绍了JS/jQuery实现超简单的Table表格添加,删除行功能,结合实例形式详细分析了JS与jQuery针对Table表格添加,删除行功能的相关实现技巧,需要的朋友可以参考下
JQuery对表格行的添加删除
03-20
JQuery对表格行的添加删除,如添加一行，删除一行
jQuery表格编辑添加删除行代码.zip
07-04
jQuery表格编辑添加删除行代码是一款适用于手机端的编辑表格代码。
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
jQuery实现的简单动态添加、删除表格功能示例
10-19
主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下
jQuery实现表格行的删除和增加(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-23 1246
jQuery实现表格行的删除和增加(1+X Web前端开发初级 例题)
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5928
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
jQuery实现表单的增删改查（完整版）
adminsir0的博客
09-01 2904
jQuery，js，增删改查，表单，数据，表格，本地存储，localstorage
jquery实现表格的添加和删除
LHH201016的博客
07-28 602
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title&...
JavaScript+jQuery获取表格复选框勾选行的值
最新发布
06-01
您可以使用以下代码来获取表格中被勾选的复选框对应的行的值： ```javascript var selectedRows = []; $('table input[type="checkbox"]:checked').each(function() { var row = $(this).closest('tr'); var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值