1. jQuery代码:

// 点击添加按钮 $("#addID").click(function(){ // 获取输入框的值 var username = $("#usernameID").val(); var tell = $("#tell").val(); // 判断用户名和号码是否填写 if(username === "" || tell === ""){ alert("用户名和号码不能为空!"); return; } // 插入数据到表格中 var tr = $(""); var td1 = $(""); var checkbox = $(""); td1.append(checkbox); var td2 = $("").text(username); var td3 = $("").text(tell); var td4 = $(""); var delBtn = $(""); td4.append(delBtn); tr.append(td1).append(td2).append(td3).append(td4); $("#tbodyID").append(tr); });

// 点击删除按钮 $("#delID").click(function(){ // 获取选中的复选框 var checkboxes = $("#tbodyID").find(":checkbox:checked"); // 判断是否有选中的复选框 if(checkboxes.length === 0){ alert("请先选择要删除的数据!"); return; } // 循环删除选中的数据 checkboxes.each(function(){ $(this).closest("tr").remove(); }); });

// 全选功能 $("#tableID").find(":checkbox:first").click(function(){ var checked = $(this).prop("checked"); $("#tableID").find(":checkbox:not(:first)").prop("checked", checked); });

// 反全选功能 $("#tableID").find(":checkbox:not(:first)").click(function(){ var checked = $("#tableID").find(":checkbox:not(:first)").length === $("#tableID").find(":checkbox:not(:first):checked").length; $("#tableID").find(":checkbox:first").prop("checked", checked); });

// 鼠标移动到表格行上改变背景颜色 $("#tableID").on("mouseenter", "tr", function(){ $(this).addClass("bgColor"); }).on("mouseleave", "tr", function(){ $(this).removeClass("bgColor"); });

// 删除按钮鼠标移上去改变背景颜色 $("#tbodyID").on("mouseenter", ":button", function(){ $(this).closest("tr").addClass("bgColor"); }).on("mouseleave", ":button", function(){ $(this).closest("tr").removeClass("bgColor"); });

CSS代码:

/* 鼠标移上去背景颜色 */ .bgColor{ background-color: #f2f2f2;

一、填空题1获取表格中包含王的单元格的内容则jQuery代码为 若需隐藏表格中第一列则jQuery代码为 。2现有代码:pspanhellospanp;则jQuery代码$phtml的结果为 为p添加红色背景代码为: 。3现有代码:input

原文地址: https://www.cveoy.top/t/topic/cKTZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录