用js创建表格及全选反选

用js代码来实现创建表格，及全选反选，代码效果图如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 创建一个创建元素的函数function chuang(id) {return document.createElement(id)}// 首先创建一个大盒子var box = chuang('div')// 然后把它放到文档body里document.body.appendChild(box)// 设置盒子样式宽和外边距box.style.width = '600px'box.style.margin = '100px auto'// 再创建table元素var tables = chuang('table')// 放到box大盒子里box.appendChild(tables)// 设置table样式tables.style.width = "600px"// 边框tables.style.border = '1px solid #ccc'// 内容居中tables.style.textAlign = 'center'// 边框合并在一起tables.style.borderCollapse = 'collapse'// 边框之间的间距tables.style.borderSpacing = 0// 在创建表头theadvar thead = chuang('thead')// thead背景颜色thead.style.backgroundColor = '#ff3040'// 把thead放到table里tables.appendChild(thead)// 创建表格内容tbodyvar tbody = chuang('tbody')// 背景颜色设置tbody.style.backgroundColor = '#ddd'// 再把tbody放到table里tables.appendChild(tbody)// 创建表头的trvar th_tr = chuang('tr')th_tr.style.height = '40px'thead.appendChild(th_tr)// 创建input元素var inps = chuang('input')// 使input type为checkboxinps.type = 'checkbox'// 把表头的数据放进一个数组var arr = [inps, '商品', '价钱']// 然后利用循环依次把数据放进th里for (var i = 0; i < 3; i++) {// 循环创建thvar th = chuang('th')th.style.border = '1px solid #ccc'th.style.color = '#fff'// 判断因为第一个数据是添加元素所以在这里做判断if (i == 0) {th.appendChild(arr[i])} else {th.innerText = arr[i]}th_tr.appendChild(th)}// 然后在把tbody里的数据放进一个数组里var data = [{bian: inps,sp: 'iPhone12',jg: 8000}, {bian: inps,sp: 'Apple Watch',jg: 3000}, {bian: inps,sp: '扫地机器人',jg: 2000}, {bian: inps,sp: '戴森无扇叶风扇',jg: 4500}, {bian: inps,sp: '小爱同学',jg: 900}, ]// 利用循环吧数据依次放进去for (var i = 0; i < data.length; i++) {// 循环创建trvar tb_tr = chuang('tr')// 这里有重新再创建input，因为开始inps只有一个，在这里再循环创建多个var td_inps = chuang('input')td_inps.type = 'checkbox'tb_tr.style.height = '40px'// 再用遍历循环数组里的对象for (var k in data[i]) {// 创建tdvar td = chuang('td')td.style.border = '1px solid #ccc'// k 为 bian时td添加td_inpsif (k == 'bian') {td.appendChild(td_inps)} else {td.innerText = data[i][k]}// 依次循环添加tdtb_tr.appendChild(td)}//再依次循环把tb_tr添加到tbodytbody.appendChild(tb_tr)}// 创建反选按钮var btn = chuang('input')btn.type = 'button'btn.style.margin = '20px 0 0 0'btn.style.width = '100px'btn.style.height = '50px'btn.value = '反选'// 把反选按钮添加到box大盒子box.appendChild(btn)// 获取tbody整个inputvar tbody_ipt = tbody.getElementsByTagName('input')// console.log(tbody_ipt);// 给th的input全选按钮添加点击事件inps.onclick = function() {for (var i = 0; i < tbody_ipt.length; i++) {// 当全选选中时，下面的tbody的input全部选中，否则取消的时候全部取消if (inps.checked) {tbody_ipt[i].checked = 'checked'} else {tbody_ipt[i].checked = ''}}}// 判断tbody的input选中时，当下面一个没选中全选就不选中function paduan() {// 给个a为true的变量var a = truefor (var i = 0; i < tbody_ipt.length; i++) {// 循环当tbody中的input没选，变量a就为falseif (!tbody_ipt[i].checked) {a = false}}// 然后在让全选按钮checked等于ainps.checked = a}// 循环tbody的input给每个input点击事件for (var i = 0; i < tbody_ipt.length; i++) {// 让input点击事件等于上面的函数tbody_ipt[i].onclick = paduan}// 给反选按钮点击事件btn.onclick = function() {for (var i = 0; i < tbody_ipt.length; i++) {// 让这里的checked等于取反的checked在应用上面的封装好的判断函数，就完成反选了tbody_ipt[i].checked = !tbody_ipt[i].checked}paduan()}</script>
</body></html>

效果图

点击全选，下面的全部选中

下面一个没选，全选就不选

点击反选时效果

用js创建表格及全选反选相关推荐

利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...
php输入文本框样式,【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 : 题目要求: 编写一个用户注册页面检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 : 代码如下 : 用户注册页面 .bg {back ...
【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能，为表格添加光棒效果
利用 jQuery 选择器实现表格的全选,取消选择,单击更改选中状态,反选等功能.如图所示.点击全选按钮,选中所有行,点击取消按钮,所有行为未选中状态,单击反选按钮,则选中的行变成未选中的: 未选 ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
html网页全选效果,为什么我用js写的全选/反选/全不选页面，没有效果？
代码奉上清空买什么书? PHP HTML5 全选反选全不选 function checkall(form,status){ var elements = form.getElementByTa ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...

用js创建表格及全选反选

用js创建表格及全选反选

用js创建表格及全选反选相关推荐

最新文章

热门文章