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

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

 📰题目要求

image.gif

📰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;
}

image.gif

📰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);
        });
    }
})

image.gif

📰题目分析

1️⃣

image.gif

引入包,写好路径即可

2️⃣

image.gif

table标签的align设置表格居中

3️⃣

image.gif

表格标题标签  <caption> 标签

image.gif

4️⃣

image.gif

border-collapse属性

image.gif

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

5️⃣

image.gif

添加click方法

6️⃣

image.gif

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

image.gif

7️⃣

image.gif

追加节点的方法

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

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

8️⃣

image.gif

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

image.gif

9️⃣🔟

image.gif

遍历tr标签,获取下标

each()方法

image.gif编辑

📰实现效果

image.gif

目录
相关文章
|
8月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
32 0
|
5月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
28 0
|
6月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
27 0
|
6月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
60 0
|
8月前
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
29 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
272 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
115 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
244 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
506 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
230 0