文章目录
效果图
公共样式
.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() {
// 表格1
createTable([
{
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');
// 表格2
createTable([
{
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: '超级管理员'
}
];
// 表格3
createTableRandomColumn(
[
{
title: '角色',
name: 'type'
},
{
title: '昵称',
name: 'name'
},
{
title: '年龄',
name: 'age'
}
],
tableArr,
'idTable3'
);
// 表格4
createTableRandomColumn(
[
{
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;
}