Jquery实现页面的新增、删除、全选、取消全选、渐变色

最新推荐文章于 2022-12-28 19:58:46 发布
最新推荐文章于 2022-12-28 19:58:46 发布
阅读量337 收藏
点赞数
分类专栏： Jquery学习内容 文章标签： java jquery html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Devil_Mao/article/details/109501605
版权

文章目录

整体代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list {
            float: left;
        }

        table, tr, td {
            width: 800px;
            height: 80px;
            border: 1px solid #000;
            text-align: center;
        }

        .odd {
            background-color: aqua;
        }

        .insert {
            float: right;
            display: none;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //渐变色
            $("tr:odd").addClass("odd");
            //全选
            $(".checkAll:checkbox").click(function () {
                if ($(this).prop("checked")) {
                    $(".choose:checkbox").prop("checked", true);
                    $("td>span").replaceWith("<span>全选</span>");
                } else {
                    $(".choose:checkbox").prop("checked", false);
                    $("td>span").replaceWith("<span>取消全选</span>");
                }
            });
            //添加
            $(".add").click(function () {
                //弹出新增页面
                $(".insert").css("display", "block");
            });
            //获取值
            var ipt1 = $("form>input:eq(0)").val();
            var ipt2 = $("form>input:eq(1)").val();
            var ipt3 = $("form>input:eq(2)").val();
            var ipt4 = $("form>input:eq(3)").val();
            var ipt5 = $("form>input:eq(4)").val();
            var ipt6 = $("form>input:eq(5)").val();
            $("form input:button").click(function () {
                //内部插入
                $("table").append("<tr>\n" +
                    "            <td><input type=\"checkbox\" class=\"choose\"></td>\n" +
                    "            <td>1</td>\n" +
                    "            <td>" + ipt1 + "</td>\n" +
                    "            <td>" + ipt2 + "</td>\n" +
                    "            <td>" + ipt3 + "</td>\n" +
                    "            <td>" + ipt4 + "</td>\n" +
                    "            <td>" + ipt5 + "</td>\n" +
                    "            <td>" + ipt6 + "</td>\n" +
                    "            <td><input type=\"button\" value=\"修改\"><input type=\"button\" value=\"删除\"></td>\n" +
                    "        </tr>");
                //渐变色
                $("tr:odd").addClass("odd");
                //隐藏新增页面
                $(".insert").hide();
            });
            //删除
            $("table").on("click", "tr td input:last-child", function () {
                //渐变色
                $("tr:odd").removeClass("odd");
                if (confirm("是否删除！")) {
                    $(this).parent().parent().remove();
                }
                //渐变色
                $("tr:odd").addClass("odd");
            });
        });
    </script>
</head>
<body>

</body>
<div class="list">
    <table cellspacing="0">
        <input type="button" value="添加" class="add">
        <tr>
            <td><input type="checkbox" class="checkAll"><span></span></td>
            <td>编号</td>
            <td>用户名</td>
            <td>密码</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机号</td>
            <td>地址</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose"></td>
            <td>1</td>
            <td>zhangsan</td>
            <td>123456</td>
            <td>男</td>
            <td>18</td>
            <td>1212212</td>
            <td>河南郑州</td>
            <td><input type="button" value="修改"><input type="button" value="删除"></td>
        </tr>
    </table>
</div>

<div class="insert">
    <form>
        用 户 名：<input type="text"><label>不能为空且长度在6-18之间</label><br>
        密 码：<input type="text"><label>只能是数字和字母且长度在8-16之间</label><br>
        确认密码：<input type="text"><label>必须和密码一样</label><br>
        性 别：<input type="radio" name="m">女<input type="radio" name="m">男<br>
        年 龄：<input type="text"><label>必须是数字</label><br>
        手 机 号：<input type="text"><label>必须是数字并且是1开头的</label><br>
        地 址：<input type="text"><label>不能为空</label><br>
        <input type="button" value="确认">
    </form>
</div>
</html>

点击这里查看效果

总结

提示：这里对文章进行总结：
本文主要介绍了Jquery实现页面的新增、删除、全选、取消全选、渐变色等页面操作

搬砖养猫咪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery颜色渐变插件jquery.color.js
12-10
本质Jquery动画没有提供在执行动画的过程中会有颜色值渐变过程 此时就需要用第三方插件来实现想要的功能, 没有积分了, 赚1积分谢谢各位大兄弟.
jquery操作checkbox实现全选和取消全选
12-11
今天这样写了一个全选和取消全选的功能： 全选：$(“:checkbox”).attr(“checked”,”checked”); 取消全选：$(“:checkbox”).removeAttr(“checked”); 获取选中的：$(“:checked[checked=’checked’]”) 发现点...
无刷新删除数据 删除过程中渐变显示当前删除的行
freejs
12-02 85
本站已经有类似的案例，这边推荐一个可以参考的《jquery 漂亮的删除确认和提交无刷新删除》 不过对于学习的话可以看看不同的   演示     JavaScript Code &lt;script type="text/javascript"&gt;   $(function() {   $(".delete_button").click(function()...
JQuery全选并删除
landi521的博客
12-28 402
JQuery全选并删除数据
jQuery 页面新增 与 删除
Xiaobai_0106的博客
11-03 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> <style> table, th, td { border: 1px solid
jquery html渐变效果,jQuery实现字体颜色渐变效果的方法
weixin_42389421的博客
06-03 687
本文实例讲述了jQuery实现字体颜色渐变效果的方法。分享给大家供大家参考，具体如下：jQuery不允许css属性值为非数字的属性进行动画处理，比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行，因此如果想实现颜色渐变的效果需要animate()外的其他方法，示例如下方法1：DocumentBBBBBB$(functi...
在JQuery中追加页面内容的几种方法
amensia_ZhangSan的博客
07-25 5321
首先,最笨的一种方法, 获取到所选元素的文本内容后,直接在它后面直接拼接内容 html页面: <div id='#test1'></div> JQuery部分代码: $("#test1").text($("#test1").text()+"Hello world!") //append(),在父级最后追加一个子元素 $(".append").click(f...
jQuery实现类似淘宝购物车全选状态示例
12-12
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...script type=”text/javascript”
用JQuery实现全选与取消的两种简单方法
01-19
用JQUERY实现全选和取消全选,没有js那么繁琐，而且支持更多浏览器。 代码如下:”text/javascript”><!–$(function() { $(“#checkall”).click(function() { $(“input[@name=’checkname[]’]”).each...
jQuery实现复选框全选/取消全选/反选及获得选择的值
10-25
主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下
css3的网页特效之网页渐变色
11-26
css3的网页特效之网页渐变色
js实现按钮颜色渐变动画效果
10-23
主要介绍了js实现按钮颜色渐变动画效果的方法,涉及javascript鼠标事件及页面表单元素样式的动态操作技巧,需要的朋友可以参考下
纯css实现全选效果
07-19
css实现全选，带样式，非常不错喔css实现全选，带样式，非常不错喔css实现全选，带样式，非常不错喔
jQuery实现购物车的总价计算和总价传值功能
12-08
效果图:  代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) <#-- 计算总价 S --> [removed] $(function() { // 加载完页面时,计算总计 showTotal(); $('.boxx').on('click', function () { // 选择多选框后,再重新计算 showTotal(); }); }); // 计算总计 function showTotal() { var total
jquery实现购物车购物车全选和增加删除商品.zip
10-14
转载pink老师
JQuery 动态添加页面
shengyao15的专栏
04-27 359
----detail.jsp 页面上点击seqNo，出现该记录的详细列表【CIM】---- 用jquery跳转到ErrorRecordsAction 再到errorrecords.jsp（组装详细列表） 再将这个页面加载进来 [code="java"]function getError(recordId) { // save(); save_correc...
jQuery如何追加tr到table中？
fishermanmax的博客
03-20 6638
jQuery 添加新内容有以下四个方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 下面实例演示：点击按钮则在表格数据区域增加一行 1、HTML结构 列1列2列3 112
JS获取复选框选中行数据（适用于批量插入、删除、修改、查询）
王世洪的博客
04-08 3309
在日常报表制作中，我们会时长遇到一些需要批量操作的功能，例如数据的批量删除、批量入库、批量新增、批量修改、批量查询等等，而此时也时长跟复选框挂钩；一般是在报表中，我们可以通过复选框的形式进行勾选，然后通过按钮或者超链接触发JavaScript事件，获取复选框选中行数据，一键删除、入库、修改、查询选中数据。 接下来，就来讲解一下，如何通过获取复选框，获取选中行数据，进而进行传参，一键删除、入库、修...
使用JQuery实现全选、反选、添加和删除功能
qizhichao110的专栏
05-06 2351
练习要求： 1.班级 姓名 薪水 就业单位  是否转正 2.全选，取消全选，反选 3.实现删除功能：删除一行或多行 4.实现添加功能。添加一行。                  table         {             width: 600px;             height: 400px;         }         table t
jquery实现多选框全选
最新发布
11-21
以下是使用jQuery实现多选框全选的代码： ```javascript // 给全选按钮绑定点击事件 $("#checkAll").click(function(){ // 获取全选按钮的状态 var status = $(this).prop("checked"); // 将所有的多选框的状态设置为与全选按钮相同 $("input[type='checkbox']").prop("checked", status); }); // 给每个多选框绑定点击事件 $("input[type='checkbox']").click(function(){ // 获取所有多选框的数量 var total = $("input[type='checkbox']").length; // 获取已选中的多选框的数量 var checkedNum = $("input[type='checkbox']:checked").length; // 如果已选中的多选框的数量等于所有多选框的数量，则将全选按钮的状态设置为选中，否则设置为未选中 if(checkedNum == total){ $("#checkAll").prop("checked", true); }else{ $("#checkAll").prop("checked", false); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值