任何想法在一个不同的方式来实现代码生成一个(动态)与X数量行和Y数量列的表作为参考一个下面?
function makeGrid(x, y) {
for (var line = 1; line <= y; line++) {
$('#pixelCanvas').append('<tr id=table' + line + '></tr>');
for (var column = 1; column <= x; column++) {
$('#table' + line).append('<td></td>');
}
}
}
我想这个答案是正确的!
注意:你可以删除函数内部的样式类来保持你想要的!!我只是想澄清一下。
const Generate = (x, y) => {
let table = document.createElement("table");
// table.className = "table table-tp-1";
let thead_elements = "";
let tbody_elements = "";
let tbody_elements_td = "";
for (let column = 0; column < y; column++) {
thead_elements += `<th> col ${column + 1}</th>`;
tbody_elements_td += `<td> data ${column + 1}</td>`;
}
for (let row = 0; row < x; row++) {
tbody_elements += "<tr>" + tbody_elements_td + "</tr>";
}
// Create Tbody Elements
let tbody = document.createElement("tbody");
let thead = document.createElement("thead");
thead.classList = "marineblue-bg white ";
thead.innerHTML = thead_elements;
tbody.innerHTML = tbody_elements;
//Append Elements
table.appendChild(thead);
table.appendChild(tbody);
document.querySelector(".table").appendChild(table);
};
Generate(Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link
rel="stylesheet"
href="https://lionzcss-api.herokuapp.com/api/css/lionzcss"
/>
</head>
<body>
<div class="table table-tp-1"></div>
</body>
</html>