Apache SCI 金融信贷 debugging sqlalchemy threejs configuration vue插件 vue插件库 jq选择第一个子元素 python转16进制 mysql删除一列 git登录命令 lora开发 cmd清空命令 python练习 python模块 python中items python安装模块 javapackage java使用 java编程学习 javapattern java初级入门教程 linux简介 python 教程 js数组删除指定元素 jb51 ipad锁屏 0x8002801c 音乐剪辑器下载 脚本错误怎么解决 ps水平翻转快捷键 python列表求和 怎么看淘龄 cinema4d下载 脚本语言 相册制作软件 winsxs可以删除吗 搜狐影音播放器
当前位置: 首页 > 学习教程  > 编程语言

根据数据创建表格

2020/12/28 19:24:31 文章标签:

根据数据创建表格 很多时候我们已经不在使用table创建表格了,而是需要根据统计的数据来创建表格,从而实现一些功能 下面我们就一起来完成一个简单的动态创建表格。 创建动态表格之前我们得大概知道表格的组成,所以首先我们来看看表格的组成部…

根据数据创建表格

很多时候我们已经不在使用table创建表格了,而是需要根据统计的数据来创建表格,从而实现一些功能
下面我们就一起来完成一个简单的动态创建表格。
创建动态表格之前我们得大概知道表格的组成,所以首先我们来看看表格的组成部分

<table>
    <!-- 标题 -->
    <caption></caption>
    <!-- 表头 -->
    <thead></thead>
    <!-- 主体 -->
    <tbody>
        <tr>
            <th></th>
            <td></td>
        </tr>
    </tbody>
</table>

然后我们来看看今天的仿写内容
在这里插入图片描述具体要求如下:
1)根据数据创建表格;
2)表格在页面中距离上面100像素、水平居中并且其每行内的内容也居中,单元格的高度是:40像素;
3)创建反选按钮并放入表格的下方,按钮的大小为宽:100像素,高:50像素;
4)点击全选按钮则每一项都要选中,如果其中的一项没有选中则全选按钮没有选中
5)点击反选按钮实现反选的功能

这是一个6行3列的表格,且第一列的内容都是复选框,后面两列以及表头内容都是需要从以下两个对象中获取的

var head_data = [{
        name: '商品'
    },
    {
        price: '价格'
    }
]
var Commodity_data = {
    "author": "candy",
    "telNum": "5201314",
    "shop_data": [{
        "addresser": "淘宝网",
        "commodity_name": "iPhone 12",
        "commodity_price": "8888",
        "date": "2020年10月14日"
    }, {
        "addresser": "天猫",
        "commodity_name": "扫地机器人",
        "commodity_price": "2200",
        "date": "2020年10月15日"
    }, {
        "addresser": "天猫",
        "commodity_name": "卡地亚",
        "commodity_price": "32800",
        "date": "2020年11月11日"
    }, {
        "addresser": "京东",
        "commodity_name": "Xbox One",
        "commodity_price": "3500",
        "date": "2020年11月11日"
    }, {
        "addresser": "天猫",
        "commodity_name": "AJ4 白银",
        "commodity_price": "2600",
        "date": "2020年12月12日"
    }]
}

认真想一下我们要获取表单中的内容需要怎么获取呢,并且表格应该怎么创建呢。
下面我们先来创建一下我们需要的表格

 <script>
        //创建大容器
        var box = document.createElement('div')
        document.body.appendChild(box)
        box.style.width = '600px'
        box.style.margin = "100px auto"
            //创建表格
        var table = document.createElement('table')
            // 将表格添加到页面
        box.appendChild(table)
            //设置表格样式
        table.style.width = '600px'
        table.style.textAlign = 'center'
        table.style.border = '1px solid #ccc'

        //创建表头
        var thead = document.createElement('thead')
            //将表头加入表格中
        table.appendChild(thead)
        thead.style.width = "600px"
        thead.style.height = '80px'
        thead.style.backgroundColor = 'red'
            //创建表头标签,值全选按钮
        var th = document.createElement('th')
        thead.appendChild(th)
        th.innerHTML = '<input type="checkbox" id="alls">'
        th.style.height = '40px'

        // 利用forin遍历循环head_data对象,创建后两列表格并复制
        for (var i = 0; i < head_data.length; i++) {
            var ths = document.createElement('th')
            thead.appendChild(ths)
            for (k in head_data[i]) {
                ths.innerText = head_data[i][k]
            }
        }

        //下面为创建后两行表格,并赋值
        for (i = 0; i < Commodity_data.shop_data.length; i++) {
            var tr = document.createElement('tr')
            table.appendChild(tr)
            tr.style.height = '40px'
                //第一例,复选框
            var td = document.createElement('td')
            tr.appendChild(td)
            td.innerHTML = '<input type="checkbox">'
            td.style.border = '1px solid #ccc'

            //第二列,内容为commodity_name
            var tds = document.createElement('td')
            tr.appendChild(tds)
                //给表格赋值
            tds.innerText = Commodity_data.shop_data[i].commodity_name
            tds.style.border = '1px solid #ccc'

            //第三列,内容为commodity_price
            var tds = document.createElement('td')
            tr.appendChild(tds)
            tds.innerText = Commodity_data.shop_data[i].commodity_price
            tds.style.border = '1px solid #ccc'
        }

        //动态创建复选框及其样式
        var btn = document.createElement('button')
        box.appendChild(btn)
        btn.innerText = "反选"
        btn.style.width = "100px"
        btn.style.height = '50px'
        btn.style.marginTop = "20px"

以上样式还不够完善,大家可以利用style属性完善一下。
我们基本的样式出来了,接下来我们就要实现全选反选的功能了。
我们一步一步的来

  • 实现全选和取消全选功能
  • 判断如果有一个复选框没有选择,就取消全选
  • 点击反选按钮,实现反选功能
  //实现全选和取消全选功能
        var inputs = document.getElementsByTagName('input')
        alls.onclick = function() {
            for (i = 0; i < inputs.length; i++) {
                inputs[i].checked = this.checked

            }
        }

        //封装一个判断是否全选的函数
        function flag() {
            var flag = true
            for (var i = 1; i < inputs.length; i++) {
                if (!inputs[i].checked) {
                    flag = false
                }
                alls.checked = flag
            }
        }
        //有一个复选框没有选择,就取消全选
        for (i = 1; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                flag()
            }
        }
        //实现反选功能
        btn.onclick = function() {
            for (i = 1; i < inputs.length; i++) {
                inputs[i].checked = !inputs[i].checked
            }
            flag()
        }

这样,简单的一个表格我们就创建完成了。
其实大概也就需要我们掌握createElement和appendChild的用法即可。


本文链接: http://www.dtmao.cc/news_show_550239.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?