表格tr选中的样式变化和checkbox选中事件

// slice去除表格的第一行(表头)
// tr上监听click mouseenter mouseleave事件
$(".list tr").slice(1).on("click mouseenter mouseleave", function (event) {
        var $tr = $(this);
        if (event.type === "mouseenter") {
            if (!$tr.hasClass("selected")) {
                $tr.addClass("trhover");
            }
        } else if (event.type === "mouseleave") {
            $tr.removeClass("trhover");
        } else if (event.type === "click") {
            var $checkbox = $("input[type='checkbox']",$tr);
            if ($checkbox.prop("checked") == true) {
                $checkbox.prop("checked", false);
                $tr.removeClass("selected");
            } else {
                $checkbox.prop("checked", true);
                $tr.addClass("selected");
            }
        }
    });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格添加、删除选中数据并带样式设置的示例代码如下: HTML: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John Smith</td> <td>32</td> <td>Male</td> </tr> <tr> <td>Jane Doe</td> <td>28</td> <td>Female</td> </tr> <tr> <td>Bob Johnson</td> <td>45</td> <td>Male</td> </tr> </tbody> </table> <form id="myForm"> <input type="text" name="name" placeholder="Name"> <input type="text" name="age" placeholder="Age"> <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> <button type="submit" onclick="addRow()">Add</button> <button type="button" onclick="deleteSelectedRows()">Delete Selected</button> </form> ``` JavaScript: ```javascript // 添加行 function addRow() { // 获取表单数据 const form = document.getElementById("myForm"); const name = form.elements["name"].value; const age = form.elements["age"].value; const gender = form.elements["gender"].value; // 创建新行 const table = document.getElementById("myTable"); const row = table.insertRow(-1); const cell1 = row.insertCell(0); const cell2 = row.insertCell(1); const cell3 = row.insertCell(2); cell1.innerHTML = name; cell2.innerHTML = age; cell3.innerHTML = gender; // 设置样式 row.style.backgroundColor = "#f2f2f2"; } // 删除选中行 function deleteSelectedRows() { const table = document.getElementById("myTable"); const rows = table.getElementsByTagName("tr"); for (let i = 0; i < rows.length; i++) { const row = rows[i]; const checkbox = row.getElementsByTagName("input")[0]; if (checkbox && checkbox.checked) { table.deleteRow(i); i--; } else { row.style.backgroundColor = "white"; } } } // 初始化表格 const table = document.getElementById("myTable"); const rows = table.getElementsByTagName("tr"); for (let i = 0; i < rows.length; i++) { const row = rows[i]; row.onclick = function() { const checkbox = this.getElementsByTagName("input")[0]; if (checkbox) { checkbox.checked = !checkbox.checked; this.style.backgroundColor = checkbox.checked ? "#f2f2f2" : "white"; } } } ``` 以上代码实现了一个简单的表格添加、删除选中数据并带样式设置的功能。其中 `addRow()` 函数用于添加新行,`deleteSelectedRows()` 函数用于删除选中行。在添加新行时,我们获取表单数据,创建新行并插入到表格中,最后设置新行的样式。在删除选中行时,我们遍历表格中的行,获取复选框元素,如果该行的复选框被选中,则删除该行,否则恢复该行的样式。在初始化表格时,我们为每一行添加点击事件,获取对应的复选框元素,如果复选框被选中,则设置该行的样式选中状态,否则恢复该行的样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值