利用js实现动态表格搭建及全选反选的功能

最新推荐文章于 2022-07-24 12:13:13 发布

Eric_freestyle

最新推荐文章于 2022-07-24 12:13:13 发布

阅读量283

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Eric_freestyle/article/details/109319463

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./shop_head.js"></script>
    <script src="./shop_json.js"></script>
</head>
<body>
    <div id="box">

    </div>
    <script>
        // 声明 给一个盒子用来放表格
        var box = document.getElementById('box')
        //给盒子设置样式
        box.style.width = '600px'
        box.style.height = '500px'
        box.style.margin = '100px auto'
        // 创建表格
        var table = document.createElement('table')
        box.appendChild(table)
        //给表格设置样式
        table.style.border = '1px solid #ccc'
        table.style.width = '600px'
        table.style.borderCollapse = 'collapse'
        table.style.cursor = 'pointer'
        // 创建表头
        var thead = document.createElement('thead')
        table.appendChild(thead)
        // 创建行
        var tr = document.createElement('tr')
        thead.appendChild(tr)
        // for循环获取数据
        //声明一个空数组用来放变量
        var arr = []
        for(var i = 0 ; i < head_data.length+1; i++) {
            var th = document.createElement('th')
            tr.appendChild(th)
            th.style.height = '40px'
            th.style.backgroundColor = '#ff3040'
            th.style.border = '1px solid #ccc'
            th.style.color = '#fff'
            //将th放到这个数组里面
            arr.push(th)
            //添加复选框
            var input = document.createElement('input')
            input.type = 'checkbox'
            input.style.cursor = 'pointer'
            th.appendChild(input)
        }
        //给表头添加数据
        for(var i = 0; i < head_data.length; i++) {
        //遍历对象
            var cool = head_data[i]
            for(var k in cool) {
                arr[i+1].innerText = cool[k]
            }
        }
        // 创建tbody
        var tbody = document.createElement('tbody')
        table.appendChild(tbody)
        for(var i = 0; i<Commodity_data.shop_data.length; i++) {
        //利用for循环创建多行
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            //设置样式
            tr.style.border = '1px solid #ccc'
            //创建单元格（单独一列）
            var td = document.createElement('td')
            tr.appendChild(td)
            //设置样式
            td.style.width = '100px'
            td.style.height = '40px'
            td.style.backgroundColor = 'rgba(0,0,0,.1)'
            td.style.textAlign = 'center'
            td.style.border = '1px solid #ccc'
            //第一列复选框
            var input = document.createElement('input')
            input.type = 'checkbox'
            input.style.cursor = 'pointer'
            td.appendChild(input)
			
			//第二列数据
            var td = document.createElement('td')
            tr.appendChild(td)
            td.style.border = '1px solid #ccc'
            td.innerText = Commodity_data.shop_data[i].commodity_name
            td.style.height = '40px'
            td.style.backgroundColor = 'rgba(0,0,0,.1)'
            td.style.textAlign = 'center'
			
			//第三列数据
            var td = document.createElement('td')
            tr.appendChild(td)
            td.style.border = '1px solid #ccc'
            td.innerText = Commodity_data.shop_data[i].commodity_price
            td.style.height = '40px'
            td.style.backgroundColor = 'rgba(0,0,0,.1)'
            td.style.textAlign = 'center'
        }
        // 创建反选按钮
        var input = document.createElement('input')
        box.appendChild(input)
        input.type = 'button'
        input.value = '  反  选  '
        input.style.width = '100px'
        input.style.height = '50px'
        input.style.marginTop = '20px'
        input.style.cursor = 'pointer'
    </script>
    <script>
        //声明变量
        var inputs = document.getElementsByTagName('input')
        var allcheck = inputs[0] 
        var recheck = inputs[inputs.length-1]
        // 实现全选
        allcheck.onclick = function() {
            for(var i = 1; i<inputs.length-1; i++) {
                inputs[i].checked = allcheck.checked
            }
        }
        // 判断
        for(var i = 1; i < inputs.length-1; i++) {
        //给每一个input注册点击事件
            inputs[i].onclick = function() {
            //判断全选按钮状态
                var flag = true
                for(var i =1;i<inputs.length-1;i++) {
                    if(!inputs[i].checked){
                    flag = false
                }
                }
                allcheck.checked = flag
        }
    }
        //反选
        recheck.onclick = function() {
            for(var i = 0;i<inputs.length; i++) {
                inputs[i].checked = !inputs[i].checked
            }
            // 判断全选按钮
            var flag = true
                for(var i =1;i<inputs.length-1;i++) {
                    if(!inputs[i].checked){
                    flag = false
                }
                }
                allcheck.checked = flag
        }
    </script>
</body>
</html>

Eric_freestyle

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
利用js实现动态表格搭建及全选反选的功能

利用js实现动态表格搭建及全选反选的功能 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt
复制链接

扫一扫