全选

let input=document.getElementsByTagName("input");$("#Complete").click(function () {//单击全选if (this.checked===true){for (let i=1;i<input.length;i++){input[i].checked=true;}}else {for (let f=1;f<input.length;f++){input[f].checked=false;}}});

单选全部选中

$(".second").click(function () {//单选全部选中let num=0;if (this.checked===false){document.getElementById("Complete").checked=false;}else {for (let i=1;i<input.length;i++){if (input[i].checked){num++;}if (num===input.length-1){document.getElementById("Complete").checked=true;}}}});

删除

$(".delete").click(function () {//删除for (let i=input.length-1;i>=1;i--){if (input[i].checked===true){input[i].parentNode.parentNode.parentNode.removeChild(input[i].parentNode.parentNode)}if (input.length===1){document.getElementById("Complete").checked=false;$(".without").show();}}})

<table border="1px" cellspacing="0" cellpadding="0" ><tr><td><input type="checkbox" id="Complete">全选</td><td>商品信息</td><td>商品价格</td><td>商品数量</td></tr><tr><td><input type="checkbox" class="second"></td><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td><input type="checkbox" class="second"></td><td>2.1</td><td>2.2</td><td>2.3</td></tr><tr><td><input type="checkbox" class="second"></td><td>3.1</td><td>3.2</td><td>3.3</td></tr><tr><td colspan="4" class="without">暂无数据...</td></tr><tr><td style="cursor: pointer" colspan="4" class="delete">删除选中</td></tr></table>

H5+JS表格全选和删除相关推荐

JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
elementui[el-table]表格全选操作以及翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 总体来看无非就是几步操作而已. ...
element 表格全选,，翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 第一步操作思路:全选操作反过 ...
JavaScript实现表格全选、全不选、反选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
jQuery实例——展示表格点击变色、全选、删除
看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用~~ 功能: 表格行点击变背景色.选择删除.全选删除.图片原图显示效果显示: 代码贴上: <!DO ...
js购物车实现全选反选删除...(附图片代码)
要求: 1.实现全选和全部选的功能.当商品被选中时,需要计算选择的商品数量和总计 2实现数量的加一或者减一.当数量改变时,需要重新计算小计:如果该商品被选中,则需要重新计算商品数量和总计.注意:商品 ...
【javascript】js实现表格全选功能
效果: 一个表格实现单选功能和全选功能. <!DOCTYPE html> <html lang="en"> <head><meta ch ...

H5+JS表格全选和删除

全选

单选全部选中

删除

H5+JS表格全选和删除相关推荐

最新文章

热门文章