所有东西的问题是,表中的数据来自数据库,通过API,所以表是动态创建的,因此我不能使用CSS来实现这一点,记住下面的代码是以数组的形式记录表中的数据。
我想将下面的css转换为Javascript,因为我的表格是动态的,无法知道tr和td的数量……
const DATA = {
"Informacoes": {
"qtRows": 3,
"qtCols": 6,
"Cabecalho": ["Id", "Encontro", "Nome", "Preco", "Quantidade", "Total"]
},
"Produtos":[
{
"Id": 200396,
"Encontro": '2017-09-26 01:22',
"Nome": 'Controlador do console de jogos',
"Preco": 22.00,
"Quantidade": 2,
"Total": 44.00
},
{
"Id": 200397,
"Encontro": '2017-09-28 05:57',
"Nome": 'iPhone X',
"Preco":999.00,
"Quantidade": 1,
"Total": 999.00
},
{
"Id": 200398,
"Encontro": '2017-09-29 05:57',
"Nome": 'Samsung S8 Black',
"Preco": 756.00,
"Quantidade": 1,
"Total": 756.00
}],
};
class TableDesktop{
constructor(_id, _arrData){
this.id = _id;
this.arrData = _arrData;
}
set tableObject(_object){ this.table = _object; }
get tableObject( ){ return this.table; }
set theadObject(_object){ this.thead = _object; }
get theadObject( ){ return this.thead; }
set bodyObject(_object){ this.body = _object; }
get bodyObject( ){ return this.body; }
createTable(){
this.generateThead();
this.generateBody();
this.generateTable();
const TABLE_CONTAINER = document.getElementById('table-container');
if(TABLE_CONTAINER.childNodes.length === 1){
TABLE_CONTAINER.removeChild(TABLE_CONTAINER.childNodes[0]);
TABLE_CONTAINER.appendChild(this.tableObject);
} else{
TABLE_CONTAINER.appendChild(this.tableObject);
}
}
generateTable(){
const TABLE = document.createElement('table');
TABLE.setAttribute('class', 'table table100-head');
TABLE.appendChild(this.theadObject);
TABLE.appendChild(this.bodyObject);
this.tableObject = TABLE;
console.log(TABLE)
}
generateThead(){
const TR = document.createElement('tr'),
THEAD = document.createElement('thead');
for(let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++){
const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna];
const TH = document.createElement('th');
TH.setAttribute('scope', 'col');
TH.appendChild(document.createTextNode(THEAD_VALUES));
TR.appendChild(TH);
}
THEAD.setAttribute('class', 'thead-dark');
THEAD.appendChild(TR);
this.theadObject = THEAD;
}
generateBody(){
const BODY = document.createElement('tbody');
let tr;
for(let linha = 0; linha < this.arrData.Informacoes.qtRows; linha++){
const BODY_VALUES = this.arrData.Produtos[linha];
tr = document.createElement('tr');
for(let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++){
const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna];
const TH = document.createElement('th');
const TD = document.createElement('td');
if(THEAD_VALUES === "Id"){
TH.setAttribute('scope', 'row');
TH.appendChild(document.createTextNode(BODY_VALUES.Id));
tr.appendChild(TH);
} else {
TD.appendChild(document.createTextNode(BODY_VALUES[this.arrData.Informacoes.Cabecalho[coluna]]));
tr.appendChild(TD);
}
}
BODY.appendChild(tr);
}
this.bodyObject = BODY;
}
}
const TABLE_DESKTOP = new TableDesktop('container-table-desktop', DATA);
TABLE_DESKTOP.createTable();
table tbody tr td:nth-child(1):before {
content: "";
}
table tbody tr td:nth-child(2):before {
content: "";
}
table tbody tr td:nth-child(3):before {
content: "Name";
}
table tbody tr td:nth-child(4):before {
content: "Price";
}
table tbody tr td:nth-child(5):before {
content: "Quantity";
}
table tbody tr td:nth-child(6):before {
content: "Total";
}
<div id="table-container"></div>
预期的结果是:https://colorlib.com/etc/tb/Table_Responsive_v1/index.html
发布于 2018-10-06 08:14:40
以下是代码的相关部分:
const STR = this.arrData.Informacoes.Cabecalho[coluna];
TD.appendChild(document.createTextNode(STR + ': ' + BODY_VALUES[STR]));
const DATA = {
"Informacoes": {
"qtRows": 3,
"qtCols": 6,
"Cabecalho": ["Id", "Encontro", "Nome", "Preco", "Quantidade", "Total"]
},
"Produtos": [{
"Id": 200396,
"Encontro": '2017-09-26 01:22',
"Nome": 'Controlador do console de jogos',
"Preco": 22.00,
"Quantidade": 2,
"Total": 44.00
}, {
"Id": 200397,
"Encontro": '2017-09-28 05:57',
"Nome": 'iPhone X',
"Preco": 999.00,
"Quantidade": 1,
"Total": 999.00
}, {
"Id": 200398,
"Encontro": '2017-09-29 05:57',
"Nome": 'Samsung S8 Black',
"Preco": 756.00,
"Quantidade": 1,
"Total": 756.00
}],
};
class TableDesktop {
constructor(_id, _arrData) {
this.id = _id;
this.arrData = _arrData;
}
set tableObject(_object) {
this.table = _object;
}
get tableObject() {
return this.table;
}
set theadObject(_object) {
this.thead = _object;
}
get theadObject() {
return this.thead;
}
set bodyObject(_object) {
this.body = _object;
}
get bodyObject() {
return this.body;
}
createTable() {
this.generateThead();
this.generateBody();
this.generateTable();
const TABLE_CONTAINER = document.getElementById('table-container');
if (TABLE_CONTAINER.childNodes.length === 1) {
TABLE_CONTAINER.removeChild(TABLE_CONTAINER.childNodes[0]);
TABLE_CONTAINER.appendChild(this.tableObject);
} else {
TABLE_CONTAINER.appendChild(this.tableObject);
}
}
generateTable() {
const TABLE = document.createElement('table');
TABLE.setAttribute('class', 'table table100-head');
TABLE.appendChild(this.theadObject);
TABLE.appendChild(this.bodyObject);
this.tableObject = TABLE;
}
generateThead() {
const TR = document.createElement('tr')
, THEAD = document.createElement('thead');
for (let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++) {
const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna];
const TH = document.createElement('th');
TH.setAttribute('scope', 'col');
TH.appendChild(document.createTextNode(THEAD_VALUES));
TR.appendChild(TH);
}
THEAD.setAttribute('class', 'thead-dark');
THEAD.appendChild(TR);
this.theadObject = THEAD;
}
generateBody() {
const BODY = document.createElement('tbody');
let tr;
for (let linha = 0; linha < this.arrData.Informacoes.qtRows; linha++) {
const BODY_VALUES = this.arrData.Produtos[linha];
tr = document.createElement('tr');
for (let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++) {
const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna];
if (THEAD_VALUES === "Id") {
const TH = document.createElement('th');
TH.setAttribute('scope', 'row');
TH.appendChild(document.createTextNode(BODY_VALUES.Id));
tr.appendChild(TH);
} else {
const TD = document.createElement('td');
const STR = this.arrData.Informacoes.Cabecalho[coluna];
TD.appendChild(document.createTextNode(STR + ': ' + BODY_VALUES[STR]));
tr.appendChild(TD);
}
}
BODY.appendChild(tr);
}
this.bodyObject = BODY;
}
}
const TABLE_DESKTOP = new TableDesktop('container-table-desktop',DATA);
TABLE_DESKTOP.createTable();
/*table tbody tr td:nth-child(1):before {
content: "";
}
table tbody tr td:nth-child(2):before {
content: "";
}
table tbody tr td:nth-child(3):before {
content: "Name";
}
table tbody tr td:nth-child(4):before {
content: "Price";
}
table tbody tr td:nth-child(5):before {
content: "Quantity";
}
table tbody tr td:nth-child(6):before {
content: "Total";
}*/
<link rel="stylesheet" type="text/css" href="https://colorlib.com/etc/tb/Table_Responsive_v1/vendor/bootstrap/css/bootstrap.min.css">
<div id="table-container"></div>
https://stackoverflow.com/questions/52672562
复制相似问题