文章目录
- 效果图
- 公共样式
- 第一种解决方案(不推荐)
- 第二种解决方案(强烈推荐)
效果图
公共样式
.d_f {display: flex;
}.flex_1 {flex: 1;
}.jc_sb {justify-content: space-between;
}.ai_c {align-items: center;
}.bc_ccc {background-color: #cccccc;
}/* ------------padding------------ */
.bs_bb {box-sizing: border-box;
}.p_6 {padding: 6px;
}.p_lr_6 {padding-left: 6px;padding-right: 6px;
}.p_lr_10 {padding-left: 10px;padding-right: 10px;
}/* - */
.ta_c {text-align: center;
}/* ----------- */
.fw_700 {font-weight: 700;
}/* ------------------- */
.b_1s_000 {border: 1px solid #000000;
}.bl_1s_000 {border-left: 1px solid #000000;
}.br_1s_000 {border-right: 1px solid #000000;
}.bt_1s_000 {border-top: 1px solid #000000;
}.bb_1s_000 {border-bottom: 1px solid #000000;
}/* ----------------------- */
.h_68 {height: 68px;
}.lh_68 {line-height: 68px;
}.h_30 {height: 30px;
}.lh_30 {line-height: 30px;
}
第一种解决方案(不推荐)
html
<div><div><h1 class="ta_c">表格1</h1><div class="b_1s_000"><div id="idTableHead" class="d_f jc_sb bc_ccc fw_700"></div><div id="idTableBody"></div></div></div><div><h1 class="ta_c">表格2</h1><div class="b_1s_000"><div id="idTableHead2" class="d_f jc_sb bc_ccc fw_700"></div><div id="idTableBody2"></div></div></div>
</div>
JavaScript
(function init() {// 表格1createTable([{id: 'a1',title: 'ID'},{id: 'b1',title: '标题'},{id: 'c1',title: '昵称'},{id: 'd1',title: '年龄'},{id: 'e1',title: '等级'}], [{id: 'a1',title: '标题1',name: '归零',age: 23,type: '超级管理员'},{id: 'b1',title: '标题2',name: '趴在墙头等红杏',age: 25,type: '协管员'},{id: 'c1',title: '标题3',name: '零壹',age: 20,type: '观察员'}], 'idTableHead', 'idTableBody');// 表格2createTable([{id: 'b1',title: '标题'},{id: 'c1',title: '昵称'},{id: 'd1',title: '年龄'},{id: 'e1',title: '等级'}], [{id: 'a1',title: '标题1',name: '归零',age: 23,type: '超级管理员'},{id: 'b1',title: '标题2',name: '趴在墙头等红杏',age: 25,type: '协管员'},{id: 'c1',title: '标题3',name: '零壹',age: 20,type: '观察员'}], 'idTableHead2', 'idTableBody2', ['id']);
})();/*** 创建表格* @param {array} tableH 表头* @param {array} tableH 表内容* @param {string} idH 表头id* @param {string} idB 表内容id* @param {array} arr 不需要渲染的字段*/
function createTable(tableH, tableB, idH, idB, arr = []) {let idHEL = document.querySelector(`#${idH}`),idBEL = document.querySelector(`#${idB}`),elTableH = '',elTableB = '';tableH.forEach((item, i) => {elTableH += `<div class="flex_1 ta_c h_30 lh_30 ${i !== 0 ? 'bl_1s_000' : ''}">${item.title}</div>`;});idHEL.innerHTML = elTableH;tableB.forEach(item => {let elB = '<div class="d_f jc_sb ai_c bt_1s_000">',i = 0;for (const key in item) {if (Object.hasOwnProperty.call(item, key)) {const val = item[key];if (!arr.includes(key)) {elB += `<div class="flex_1 ta_c h_30 lh_30 ${i !== 0 ? 'bl_1s_000' : ''}">${val}</div>`;i++;}}}elTableB += elB + '</div>';});idBEL.innerHTML = elTableB;
}
第二种解决方案(强烈推荐)
html
<div><div><h1 class="ta_c">表格3</h1><div id="idTable3" class="b_1s_000"></div></div><div><h1 class="ta_c">表格4</h1><div id="idTable4" class="b_1s_000"></div></div>
</div>
JavaScript
(function init() {let tableArr = [{id: 'a1',title: '标题3',name: '零壹',age: 20,type: '观察员'},{id: 'b1',title: '标题2',name: '趴在墙头等红杏',age: 25,type: '协管员'},{id: 'c1',title: '标题1',name: '归零',age: 23,type: '超级管理员'}];// 表格3createTableRandomColumn([{title: '角色',name: 'type'},{title: '昵称',name: 'name'},{title: '年龄',name: 'age'}],tableArr,'idTable3');// 表格4createTableRandomColumn([{title: '编号',name: 'id',textAlignH: 'center',textAlignB: 'center'},{title: '昵称',name: 'name',textAlignH: 'center',textAlignB: 'left'},{title: '年龄',name: 'age',textAlignH: 'center',textAlignB: 'center'},{title: '标题',name: 'title',textAlignH: 'center',textAlignB: 'left'},{title: '角色',name: 'type',textAlignH: 'center',textAlignB: 'center'}],tableArr,'idTable4');
})();/**
* 创建表格，自定义列的顺序
* @param {array} tableTemplate 表格模板，定义表头，列对应的字段
* @param {array} tableBody 表格内容
* @param {string} idBox 表格容器id
*/
function createTableRandomColumn(tableTemplate, tableBody, idBox) {let idBoxEl = document.querySelector(`#${idBox}`),elHead = '<div class="d_f jc_sb bc_ccc fw_700">',elBody = '<div>';tableTemplate.forEach((item, i) => {elHead += `<div class="flex_1 h_30 lh_30 bs_bb p_lr_10 ${i !== 0 ? 'bl_1s_000' : ''}" style="text-align: ${item.textAlignH ? item.textAlignH : 'center'}">${item.title}</div>`;});tableBody.forEach(item => {let elB = '<div class="d_f jc_sb ai_c bt_1s_000">';tableTemplate.forEach((items, i) => {elB += `<div class="flex_1 h_30 lh_30 bs_bb p_lr_10 ${i !== 0 ? 'bl_1s_000' : ''}" style="text-align: ${items.textAlignB ? items.textAlignB : 'center'}">${item[items.name]}</div>`;});elB += '</div>';elBody += elB;});elHead += '</div>';elBody += '</div>';idBoxEl.innerHTML = elHead + elBody;
}
