根据配置项生成表格

其他 2018-08-12 13:17:41 阅读次数: 0 
优化过后的：
function makeTable(id, _data) {
    var _tableStyle = "width: 100%; background-color: #fff; color: #666;",
        _allTdStyle = "position: relative;padding: 9px 15px;min-height: 20px;line-height: 20px;font-size: " +
      "14px;border-width: 1px;border-style: solid;border-color: #e6e6e6;";
    var _form = document.getElementById(id);
    _form.innerHTML = '';
    var _table = document.createElement('table');
    _table.setAttribute('style', _tableStyle + '');
    var firstTr = document.createElement('tr');
    _table.appendChild(firstTr);
    _form.appendChild(_table);
    _data.forEach(function (ele) {
        var trLast = document.querySelector('#_form table tr:last-child');
        var _tdKey = document.createElement('td');
        _tdKey.setAttribute('style', _allTdStyle + 'background: #f8f8f8; text-align: center; min-width: 100px;');
        _tdKey.setAttribute('rowspan', ele.rows); // 跨行数
        _tdKey.setAttribute('colspan', ele.kcols); // 跨列数
        _tdKey.setAttribute('data-key', ele.key); // 单元格标志
        _tdKey.innerText = ele.name; // key值
        trLast.appendChild(_tdKey);
        if (ele.th != true) {
            var _tdVal = document.createElement('td');
            _tdVal.setAttribute('style', _allTdStyle + '');
            _tdVal.innerText = ele.val;
            _tdVal.setAttribute('rowspan', ele.rows); // 跨行数
            _tdVal.setAttribute('colspan', ele.vcols); // 跨列数
            _tdVal.setAttribute('data-key', ele.key); // 单元格标志
            trLast.appendChild(_tdVal);
        }
        if (ele.newr) {
            var _tr = document.createElement('tr');
            _table.appendChild(_tr);
        }
    });
}

/*  ------------------------------------------------------------
<div id="_form" style="margin: 10px;"></div>
var _data = [
  {
      key: 'qymc', // key名
      name: '企业名称',
      val: data.qymc, // val值
      edit: 'ddd',  // 是否可编辑，暂时未处理
      rows: '', // 所占据行数
      kcols: '', // key 列数
      vcols: '3', // val 列数
      newr: '', // 是否要新开一行（以此结尾）
      th: '', // 是否是纯粹标题（无val）
  },
]
makeTable('_form', _data); 
-----------------------------------------------------------------*/
原有的：
<div id="_form" class="search_form_div"> </div>
//获取数据并填充弹出层表格数据
function makeTable(id, _data) {
    var _form = document.getElementById(id);
    _form.innerHTML = '';
    var _table = document.createElement('table');
    _table.classList.add('layui-table');
    var firstTr = document.createElement('tr');
    _table.appendChild(firstTr);
    _form.appendChild(_table);
    _data.forEach(function (ele) {
        var _tdKey = document.createElement('td');
        var _tdVal;
        _tdKey.setAttribute('rowspan', ele.rows);
        _tdKey.setAttribute('colspan', ele.kcols);
        _tdKey.setAttribute('data-key', ele.key);
        _tdKey.innerText = ele.name;
        // _tdKey.classList.add('table-td-key');
        _tdKey.setAttribute('style', 'background: #f8f8f8; text-align: center; min-width: 100px; width: 20%;');

        if (ele.th != true){
            _tdVal = document.createElement('td');
            _tdVal.innerText = ele.val;
            _tdVal.setAttribute('rowspan', ele.rows);
            _tdVal.setAttribute('colspan', ele.vcols);
            _tdVal.setAttribute('data-key', ele.key);
            _tdVal.setAttribute('style', 'min-width: 200px;')
            // var newTrLast = document.querySelector('#_form table tr:last-child');
        }
        if (ele.newr) {
            var trLast = document.querySelector('#_form table tr:last-child');
            trLast.appendChild(_tdKey);
            if (_tdVal) {
                trLast.appendChild(_tdVal);
            }
            var _tr = document.createElement('tr');
            _table.appendChild(_tr);
        } else {
            var trLast = document.querySelector('#_form table tr:last-child');
            trLast.appendChild(_tdKey);
            if (_tdVal) {
                trLast.appendChild(_tdVal);
            }
        }
        if (ele.button==true){
            var _input = document.createElement('input');
            _input.setAttribute('type','button');
            _input.setAttribute('value','查看附件');
            _input.classList.add('attachment');
            _input.classList.add('layui-btn');
            _input.classList.add('layui-btn-primary');
            _tdVal .appendChild(_input)
        }
    });
}
// 查看详细信息
tableData.detail = function(rowData){
    var _data = [
        {
            key: 'qymc', // key名
            name: '企业名称',
            val: rowData.qymc, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sbmc', // key名
            name: '设备名称',
            val: rowData.sbmc, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sbbh', // key名
            name: '设备编号',
            val: rowData.sbbh, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sblx', // key名
            name: '设备类型',
            val: rowData.sblx, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'ggxh', // key名
            name: '规格型号',
            val: rowData.ggxh, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'zycs', // key名
            name: '主要参数',
            val: rowData.zycs, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'zzcj', // key名
            name: '制造厂家',
            val: rowData.zzcj, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'gzsj', // key名
            name: '购置时间',
            val: rowData.gzsj, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'tysj', // key名
            name: '投用时间',
            val: rowData.tysj, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sydd', // key名
            name: '使用地点',
            val: rowData.sydd, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'yxqk', // key名
            name: '运行情况',
            val: rowData.yxqk, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sbsl', // key名
            name: '设备数量',
            val: rowData.sbsl, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'sfzdjktzsb', // key名
            name: '是否重点监控特种设备',
            val: rowData.sfzdjktzsb, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'syzbh', // key名
            name: '使用证编号',
            val: rowData.syzbh, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'syzfzrq', // key名
            name: '使用证发证日期',
            val: rowData.syzfzrq, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'fzdw', // key名
            name: '发证单位',
            val: rowData.fzdw, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'jyzq', // key名
            name: '检验周期',
            val: rowData.jyzq, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'xcjyrq', // key名
            name: '下次检验时间',
            val: rowData.xcjyrq, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'zhycjysj', // key名
            name: '最近一次检验时间',
            val: rowData.zhycjysj, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'jyqk', // key名
            name: '检验情况',
            val: rowData.jyqk, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'fzr', // key名
            name: '负责人',
            val: rowData.fzr, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'fzrgddh', // key名
            name: '负责人固定电话',
            val: rowData.fzrgddh, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'fzryddh', // key名
            name: '负责人移动电话',
            val: rowData.fzryddh, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: '', // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },{
            key: 'fzrdzyx', // key名
            name: '负责人电子邮箱',
            val: rowData.fzrdzyx, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '3', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },
        {
            key: 'bz', // key名
            name: '备注',
            val: rowData.bz, // val值
            edit: 'ddd',  // 是否可编辑，暂时未处理
            rows: '', // 所占据行数
            kcols: '', // key 列数
            vcols: '9', // val 列数
            newr: true, // 是否要新开一行（以此结尾）
            th: '', // 是否是纯粹标题（无val）
        },

    ];
    makeTable('_form', _data);

猜你喜欢

转载自blog.csdn.net/weixin_39717076/article/details/80852356
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022