精华内容
下载资源
问答
  • JS动态表格
    2022-02-25 13:15:02

    1、因为里面的数据都是动态的,需要JS来动态生成 ,数据采取对象形式存储

    2、所有的数据都是放在tbody行里面

    3、创建的行数对应多少人,用数组的长度来获取

     

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            table {
                border-collapse: 0px;
                border-spacing: 0px;
                width: 300px;
                height: auto;
                text-align: center;
                border: 0.5px solid black
            }
            
            thead {
                font-weight: bold;
                background-color: grey;
            }
            
            td {
                border: 0.5px solid black;
            }
        </style>
    
        <body>
            <table>
                <thead>
                    <td>姓名</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </thead>
                <tbody>
    
                </tbody>
            </table>
            <script>
                //通过对象存储信息,数组里面可以存放多个数据,一个数据就是一个对象
                var datas = [{
                        name: '卫英络',
                        subject: 'javascript',
                        score: 100
                    }, {
                        name: '宏利',
                        subject: 'javascript',
                        score: 98
                    }, {
                        name: '富恒',
                        subject: 'javascript',
                        score: 60
                    }, {
                        name: '明宇',
                        subject: 'javascript',
                        score: 78
                    }, {
                        name: 'yy',
                        subject: 'javascript',
                        score: 10
                    }]
                    //需要把数据放在tbody里面
                    //先有行,有几个人就创建几行,通过数组长度得到
                var tbody = document.querySelector('tbody')
                for (var i = 0; i < datas.length; i++) { //外面的for循环管理行
                    //创建行
                    var tr = document.createElement('tr')
                        //添加行
                    tbody.appendChild(tr) //里面没有内容
                        //往每个行里面创建单元格,所以单元格应该写在循环里面,单元格个数取决于对象属性的数目  通过for循环遍历对象(数组中的每一个对象)(for in)  里面的for循环管理列
                    for (var k in datas[i]) { //用来创建单元格的个数  与数据有关
                        //创建单元格 每循环一次创建一个td并且放在行里面
                        var td = document.createElement('td')
                        tr.appendChild(td)
                            //把对象里面的属性值给td
                        td.innerHTML = datas[i][k] //神奇
                    }
    
    
                    //添加删除单元格  神奇
                    var td = document.createElement('td')
                    tr.appendChild(td) //是再tr这个父元素,作为子元素放入tr里面去
                        //添加单元格里面的删除内容
                    td.innerHTML = "<a href='#'>删除</a>"
    
                }
                //添加事件,点击删除的时候,就会删除改行,应该写在整个for循环的下面,因为要等到表格创建完
                //获取所有的a
                var a = document.querySelectorAll('a')
                    //循环依次添加注册事件
                for (var i = 0; i < a.length; i++) {
                    a[i].onclick = function() {
                        //node.removeChild(child)
                        //链接所在的行chlid,a的父亲是td,td的父亲是tr,node行的父亲为tbody
                        tbody.removeChild(this.parentNode.parentNode)
                    }
                }
            </script>
        </body>
    
    </html>

    更多相关内容
  • excel动态图表模板

    2017-08-23 17:31:58
    对于java人员来讲这种动态模板的用处是可以直接通过Java代码向模板中指定的行和列输入对应的数据,图表就自动的出来了,可以达到“统计报表”的功能效果。 即:导出或生成的excel中不仅带有统计数据,还带有统计的...
  • Axure8动态图表插件.zip

    2021-05-13 12:28:18
    在RP中点击载入元件库导入,轻松拖拽实现在RP中展示动态图表,包括饼图、折线图、柱状图、面积图、环形图等多种样式图表,满足原型设计动态完美展示。
  • 资源一:《Mapping and Charting Solutions(资源一),ArcGIS10.2.2动态表格扩展模块,亲测可用!》,10.2模块本体。 资源二:《Mapping and Charting Solutions(资源二),ArcGIS10.2.2动态表格扩展模块,亲测...
  • 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,...
  • vue动态表格数据查询筛选代码是一款通过获取json数据表格,输入关键词搜索查询筛选表格列表实例代码。
  • angularjs实现动态表格

    2019-04-24 09:01:08
    个人上传,关于使用angularjs实现动态表格,用数组控制表格的tr,td的重复次数,好扎心,后端人员写的,如有不足,请指教
  • 资源一:《Mapping and Charting Solutions(资源一),ArcGIS10.2.2动态表格扩展模块,亲测可用!》,10.2模块本体。 资源二:《Mapping and Charting Solutions(资源二),ArcGIS10.2.2动态表格扩展模块,亲测...
  • 在RP中点击载入元件库导入,轻松拖拽实现在RP中展示动态图表,包括饼图、折线图、柱状图、面积图、环形图等多种样式图表,满足原型设计动态完美展示。
  • bootstrap动态表格模板

    2018-09-23 13:22:50
    这个是bootstrap动态表格模板,非常酷,可以直接使用,包括筛选,分页,排序等
  • 主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
  • 动态表格生成数据管理系统主要适用于从事各种信息收集整理汇总的工作岗位,特别是办公室人员。它没有固定的表格模式,完全可以结合当前工作需要在线制定表格并指定数据填报者
  • 主要介绍了JS实现动态表格的添加,修改,删除功能(推荐)的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
  • 要在 PPT 里实现可以交互演示的动态图表(不是动画图表哦),可以有以下几种方法来实现: 1. PPT VBA 编程 2. Xcelsius 水晶易表 3. PowerBI/Tableau 仪表板网页嵌入PPT 4. PPT 链接跳转模拟 5. PPT 链接回 Excel ...
  • Excel VBA创建动态图表

    2019-05-24 01:59:59
    NULL 博文链接:https://jacky2007.iteye.com/blog/369609
  • Shift+F4绝对引用 光标在B6单元格中变成小+的时候往右拖动,结果为下图: 制作一个有两个项目的数据对比的动态图表,增加一个控件即可,步骤同上

    Shift+F4绝对引用

    光标在B6单元格中变成小+的时候往右拖动,结果为下图:

     

    制作一个有两个项目的数据对比的动态图表,增加一个控件即可,步骤同上

    展开全文
  • excel动态图表教程.rar

    2020-06-11 17:17:27
    excel,动态图表,可视化图表,无论是工作还是生活中都会大量使用Excel表格图表等多种表格图表,而涉及到的样式也是多种多样,诸如Excel表格、折线图、动态图表等等。在工作中借助饼状图不但可以极大地提升日常...
  • EXCEL动态图表,鼠标随动;EXCEL动态图表制作,很好的图表制作效果。
  • 以武夷山生态监测数据为例,开展多源异构生态监测数据的标准化集成管理和基于高并发地图切片服务引擎技术的动态图表可视化设计研究,对标准化的监测数据进行服务封装,以动态图表的形式将监测数据进行时空分布可视化...
  • 左手数据,右手图表:Excel动态图表制作与职场数据沟通 徐军泰 著 ISBN:978-7-111-44720-7
  • Excel柱形图条形图模板-动态图表之不同组别年对比Excel图表
  • offset做动态图表.xlsx

    2020-04-05 01:11:13
    这个工作表是一个用offset做的一个动态图表,其中用到offset函数,使图表达到动态效果,比一般图表好看不要太多,谢谢大家的支持
  • 一、动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下 ”tdl”><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在...
  • 动态表格生成数据管理系统主要适用于从事各种信息收集整理汇总的工作岗位,特别是办公室人员。它没有固定的表格模式,完全可以结合当前工作需要在线制定表格并指定数据填报者
  • vue.js动态表格增加删除修改代码是一款带日期显示,支持删除和重新编辑表格内容效果代码。
  • 盈亏平衡分析(本量利分析模型)-EXCEL动态图表-折线散点图.xls
  • 如何实现BootStrapTable的动态表格

    千次阅读 2020-05-28 09:49:23
    BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称:BsTable),其中columns参数作为表格列的内容存储,我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式:...

    BootStrapTable的动态表格

    在我们构建BootStrapTable(下文中均称:BsTable),其中columns参数作为表格列的内容存储,我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。

    columns参数格式:类似下文

    columns: {
        {
            field: 'Id',
            title: '编号',
        },{
            field: 'name',
            title: '名称',
        },{
            field: 'sex',
            title: '性别',
            //自定义方法
            formatter: function (value) {
                if (value == 1) {
                    return '男';
                } else if (value == 2) {
                    retuen '女';
                }
            }
        },
    }
    
    

    需求:通过点击按钮发送ajax请求,针对请求返回的数据进行动态表格的构建。
    按钮构造:设置点击事件

    <button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
        <i class="fa fa-check"></i>&nbsp;SQL语句执行
    </button>
    
    

    点击事件编写:dataQuery.js (注意:这里将逐段解析,最后将贴上完整版代码)

    1.获取html页面元素值
    由于实现该功能的需要两个参数:SQL语句(sql) + 连接信息(connectInfo)
    ,所以要先从页面上获取两个元素的值:类选择器选择元素获取对应值。

    var sql = $('#sql').val();
    var connectInfo = $('#connectInfo').val();
    

    2.选定页面表格元素,发送ajax请求,构建BSTable
    页面上的表格元素:采用beetl的标签,将重复使用的html代码用一行代码标签代替,方便使用,易于维护。

    <#table id="DataQueryTable"/>
    

    2.1 ajax请求参数配置

    参数含义
    type请求类型
    url请求链接地址
    contentType发送给服务器的格式
    dataType收到数据的格式
    data发送给服务端的数据
    success请求成功时调用
    error请求失败时调用
    详细代码:
    $('#DataQueryTable').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: 见下文
                error: 见下文
        })
    })
    
    

    2.2 ajax请求成功,根据返回json数据构造动态表头
    2.2.1 初始化自定义动态表头数组

        //定义动态表头字段数组
        var dynamicHeader = [];
        //向数组中填入属性
        dynamicHeader.push({
            field: "state",
            check: true
        });
    
    

    2.2.1 动态表头生成

       //针对返回的json数据,遍历json数据的key集合
       for (var i = 0; i<(Object.keys(json[0])).length; i++) {
           //获取对应索引的value值,将获取的值设置到动态表头字段中。
           var property = (Object.keys(json[0]))[i];
           dynamicHeader.push({
               "title": property,
               "field": property,
               //显示是否显示隐藏
               switchable: true,
               //是否开启排序
               sortable: true
           });
       }
    
    

    这段代码我们可以结合浏览器F12,查看Object.keys(json[0])中的具体内容:模拟一个请求/test。
    在这里插入图片描述
    2.2.3 构造表格,构造表格前要进行table销毁,否则会保留上次加载的内容

       $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
           //得到的json数据,会根据columns参数进行对应赋值配置
           data: json,
           //Bstable工具导航条
           toolbar: '#toolbar',
           //浏览器缓存,默认为true,设置为false避免页面刷新调用浏览器缓存
           cache: false,
           //是否显示行间隔色
           striped: true,
           //分页方式:client客户端分页,server服务端分页
           sidePagination: "client",
           //排序方式
           sortOrder: "desc",
           //每页记录行数
           pageSize: 25,
           //初始化加载第一页
           pageNumber: 1,
           //可供选择的每页行数
           pageList: "[25, 50, 100, All]",
           //是否显示切换按钮
           showToggle: true,
           //是否显示所有的列
           showColumns: true,
           //是否显示导出按钮(下篇文章将会提到)
           showExport: true,
           //导出数据类型(下篇文章将会提到)
           exportDataType: "basic",
           //是否显示分页
           pagination: true,
           //是否启用全匹配搜索,否则为模糊搜索
           strictSearch: true,
           //开启搜索
           search: true,
           //自定义所生成的动态表头放入,结合上述json数据,实现表格数据内容的构建
           columns: dynamicHeader
       });
     },
    
    

    2.3 ajax请求失败,弹窗报告错误信息,页面重加载

    error: function () {
        alert("SQL查询错误,请输入正确的SQL语句!");
        location.reload();
    }
    
    

    完整js代码

    /**
     *  BsTable动态表格生成
     */
    DataQuery.sqlExecute = function (){
    
        var sql = $('#sql').val();
        var connectInfo = $('#connectInfo').val();
    
        $('#DataQueryTable').bootstrapTable({
            ajax: function (request) {
                $.ajax({
                    type: "GET",
                    url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    json: 'callback',
                    success: function (json) {
    
                        var dynamicHeader = [];
                        dynamicHeader.push({
                            field: "state",
                            check: true
                        });
    
                        for (var i = 0; i<(Object.keys(json[0])).length; i++) {
                            var property = (Object.keys(json[0]))[i];
                            //console.log(property);
                            dynamicHeader.push({
                                "title": property,
                                "field": property,
                                switchable: true,
                                sortable: true
                            });
                        }
    
                        //console.log(Object.keys(json[0]));
    
                        $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
                            data: json,
                            toolbar: '#toolbar',
                            cache: false,
                            striped: true,
                            sidePagination: "client",
                            sortOrder: "desc",
                            pageSize: 25,
                            pageNumber: 1,
                            pageList: "[25, 50, 100, All]",
                            showToggle: true,
                            showColumns: true,
                            showExport: true,
                            exportDataType: "basic",
                            pagination: true,
                            strictSearch: true,
                            search: true,
                            columns: dynamicHeader
                        });
                    },
                    error: function () {
                        alert("SQL查询错误,请输入正确的SQL语句!");
                        location.reload();
                    }
                });
            }
        });
    };
    
    

    3.测试动态表格生成结果
    3.1 测试分两部分,首先获取请求所得到的json数据,模拟请求获取100条数据

    @RequestMapping(value = "/test")
        @ResponseBody
        public Object test(){
            return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" +
                    "      ,[S_INFO_WINDCODE]\n" +
                    "      ,[S_CON_WINDCODE]\n" +
                    "      ,[S_CON_INDATE]\n" +
                    "      ,[S_CON_OUTDATE]\n" +
                    "      ,[CUR_SIGN]\n" +
                    "      ,[OPDATE]\n" +
                    "      ,[OPMODE]\n" +
                    "  FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
        }
    

    3.2 查看请求所返回的json数据
    在这里插入图片描述
    3.2 测试动态表格生成
    上述的请求可以正常返回数据,那我们通过ajax请求所构建的动态BSTable呢?
    请求为:SQL语句/链接信息,ajax请求返回json数据,与上述请求一致。
    在这里插入图片描述
    查看我们的动态表格生成状况:
    在这里插入图片描述
    宾果,至此BootStrapTable动态表格功能已实现。

    展开全文
  • 动态表格生成数据管理系统主要适用于从事各种信息收集整理汇总的工作岗位,特别是办公室人员。它没有固定的表格模式,完全可以结合当前工作需要在线制定表格并指定数据填报者

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 301,063
精华内容 120,425
关键字:

动态表格