jQuery实现表格行的删除和增加-阿里云开发者社区

jQuery实现表格行的删除和增加

2022-11-07 276

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用jQuery实现对表格元素行的删除和增加效果

📰题目要求

📰html代码

<!DOCTYPE html><html><head><metacharset="utf-8"><title>通讯录</title><linkrel="stylesheet"href="./css/style.css"><!-- 引入jq库 --><!-- <script src="_____(1)______"></script> --><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/index.js"></script></head><body><divclass="box"><!-- 表格居中 --><!-- <table ___(2)___="center"> --><tablealign="center"><!-- 表格标题 --><!-- <___(3)____>通讯录</___(3)____> --><caption>通讯录</caption><thead><tr><th>序号</th><th>姓名</th><th>电话</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>13754448888</td><td><button>删除</button></td></tr><tr><td>2</td><td>李四</td><td>13788889999</td><td><button>删除</button></td></tr></tbody></table><buttonclass="add">添加一行</button></div></body></html>

📰css代码

.box{
width: 400px;
margin:30pxauto;
text-align: center;
}
.box>button{
width: 100%;
height: 40px;
margin-top:20px;
border:none;
border-radius: 10px;
background-color: green;
color:#fff;
}
table{
width:400px;
text-align:center;
/*边框重叠*//* _____(4)_______; */border-collapse: collapse;
}
tablecaption{
height: 60px;
line-height: 60px;
font-weight: 600;
}
tableth{
background-color: #f5f5f5;
}
table,td,th{
border:1pxsolid#ccc;
}
tabletr{
height:50px;
}

📰js代码

$(function(){
// 添加行 绑定点击事件// $(".add").___(5)____(function(){$(".add").click(function(){ 
varnewTr=$("<tr></tr>");
for(i=0;i<$("thead>tr>th").length;i++){
newTd=$("<td></td>");
if(i==0){
newTd.text($("tbody>tr").length+1);
            }
if(i==$("thead>tr>th").length-1){
//设置标签内容// newTd.__(6)____("<button>删除</button>")newTd.html("<button>删除</button>");
            }
//追加节点// newTd.__(7)_____(newTr);newTd.appendTo(newTr);
        };
$("tbody").append(newTr);
changeColor();
    })
// 隔行换色functionchangeColor(){
$("tbody tr:odd").css("background","#f5f5f5");
$("tbody tr:even").css("background","#fff");
    }
changeColor();
// 删除行// $("tbody").____(8)___("click","button",function(){$("tbody").on("click","button",function(){
$(this).parents("tr").remove();
changeColor();
order();
    });
//重新排序functionorder(){
// $("tbody tr").__(9)____(function(index){$("tbody tr").each(function(index){
// $(this).children().eq(0).text(__(10)____);$(this).children().eq(0).text(index+1);
        });
    }
})

📰题目分析

1️⃣

引入包，写好路径即可

2️⃣

table标签的align设置表格居中

3️⃣

表格标题标签 <caption> 标签

4️⃣

border-collapse属性

separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

5️⃣

添加click方法

6️⃣

设置标签内容用到html() 方法

7️⃣

追加节点的方法

appendTo()方法 //子元素添加到父元素里,并且添加到父元素内容的后面面

除此还有append方法、prepend方法、prependTo方法、after方法、before方法

8️⃣

在代码后面我们可以看到"click"的方法，所以用on()方法

9️⃣🔟

遍历tr标签，获取下标

each()方法

编辑

📰实现效果