点击按钮table增加tr数据以及全选,反全选前端页面写法

最新推荐文章于 2021-09-07 11:04:03 发布

小科比000

最新推荐文章于 2021-09-07 11:04:03 发布

阅读量455

点赞数

分类专栏： jquery 文章标签： jsp attr/prop区别

本文链接：https://blog.csdn.net/qq_39548700/article/details/104963541

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

作为后台人员,真的是每次写前端页面很烦躁,虽然很简单,简单的小案例记录一下
代码效果如下:
在这里插入图片描述
jsp文件如下：

<!DOCTYPE html>
<head>
<title>编辑购房人家庭成员</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
    #cyxx td{
        border-bottom: 1px solid #9BA3B6;
        border-right: 1px solid #9BA3B6;
    }
</style>
<script>
    $(function () {
        function addQtcy(){
            var xm = $("#xm").val();
            var zjhm = $("#zjhm").val();
            if(xm== '' || xm==undefined || xm==null){
                alert("填写其他成员姓名!");
                return;
            }
            if(zjhm=='' || zjhm==undefined || zjhm==null){
                alert("填写其他成员证件号码!");
                return;
            }
            var htmlInput  = '<tr><td style="border-bottom:1px solid #9BA3B6;border-right: 1px solid #9BA3B6;">' +
                '<input type="checkbox" name="cy"></td>' +
                '<td style="border-bottom:1px solid #9BA3B6;border-right: 1px solid #9BA3B6;">'+xm+'</td>' +
                '<td style="border-bottom:1px solid #9BA3B6;border-right: 1px solid #9BA3B6;">'+zjhm+'</td></tr>';
            $('#cyxx').append(htmlInput);
            $("#xm").val('');
            $("#zjhm").val('');
        }
        //其他成员增加
        $("#addCyxx").click(function(){
            addQtcy();
        });
    })

    //全选反选
    function allChecked() {
        var checkedOfAll=$("#sellectAll").prop("checked");
        $("input[name='cy']").prop("checked", checkedOfAll);
    }

    //删除其他成员
    function deleteQtcy() {
        $("input[name='cy']:checked").each(function() { // 遍历选中的checkbox
            var n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            $("table#cyxx").find("tr:eq("+n+")").remove();
        });
        $("#sellectAll").attr("checked",false);
    }

</script>
</head>
<body>
<table>
    <tr>
        <td>姓名</td>
        <td><input id="xm"></td>
        <td>证件号码</td>
        <td><input id="zjhm"></td>
        <td>
            <a href="#" id="addCyxx">增加</a>
            <a href="#" onclick="deleteQtcy()">删除</a>
        </td>
    </tr>
</table>
<br>
<div style="height: 240px;width: 480px;overflow:auto;" >
    <table id="cyxx" style="border-top: 1px #9BA3B6 solid;border-left: 1px #9BA3B6 solid;width: 100%;border-collapse: collapse;">
        <tr>
            <td style="width: 10%">
                <input type="checkbox" id="sellectAll" onclick="allChecked()">
            </td>
            <td style="width: 20%">姓名</td>
            <td style="width: 30%">证件号码</td>
        </tr>
    </table>
</div>
</body>
</html>

全选及反选方法allChecked中$("#sellectAll").prop("checked");之前是用的attr属性，项目中attr属性可行，prop属性报错；测试小案例中attr属性反而不生效。

这就涉及到attr()与prop()两方法的异同：
attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。
不过，在jQuery中，attribute和property却是两个不同的概念。
① 操作对象不同
attribute表示HTML文档节点的属性，property表示JS对象的属性。prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
② 应用版本不同
attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。
③ 设置属性值不同
由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
④ 其他
在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。
此外，对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。
但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

由于项目时间比较长，项目中引用的是1.4版本的jquery，使用attr获取指定属性，而测试demo中引用了网上较高版本3.4，使用prop进行获取指定属性。

小科比000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮table增加tr数据以及全选,反全选前端页面写法

作为后台人员,真的是每次写前端页面很烦躁,虽然很简单,简单的小案例记录一下代码效果如下:jsp文件如下：<!DOCTYPE html><head><title>编辑购房人家庭成员</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></...
复制链接

扫一扫