Man*_*ald 88 javascript html-table
我有一个JavaScript函数,它创建一个包含3行2个单元格的表.
谁能告诉我如何使用我的功能创建下表(我需要根据我的情况这样做)？
这是我的javascript和html代码,如下所示:
function tableCreate() {
//body reference
var body = document.getElementsByTagName("body")[0];
// create elements <table> and a <tbody>
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// cells creation
for (var j = 0; j <= 2; j++) {
// table row creation
var row = document.createElement("tr");
for (var i = 0; i < 2; i++) {
// create element <td> and text node
//Make text node the contents of <td> element
// put <td> at end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell is row " + j + ", column " + i);
cell.appendChild(cellText);
row.appendChild(cell);
}
//row added to end of table body
tblBody.appendChild(row);
}
// append the <tbody> inside the <table>
tbl.appendChild(tblBody);
// put <table> in the <body>
body.appendChild(tbl);
// tbl border attribute to
tbl.setAttribute("border", "2");
}<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>Cer*_*rus 107
稍微短的代码使用insertRow和insertCell:
function tableCreate(){
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for(var i = 0; i < 3; i++){
var tr = tbl.insertRow();
for(var j = 0; j < 2; j++){
if(i == 2 && j == 1){
break;
} else {
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
td.style.border = '1px solid black';
if(i == 1 && j == 1){
td.setAttribute('rowSpan', '2');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();此外,这不会使用一些"不良做法",例如设置border属性而不是使用CSS,并且它访问body通过document.body而不是document.getElementsByTagName('body')[0];
Cra*_*aub 96
这应该工作(从上面的代码的一些改动).
function tableCreate() {
var body = document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
tbl.style.width = '100%';
tbl.setAttribute('border', '1');
var tbdy = document.createElement('tbody');
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 2; j++) {
if (i == 2 && j == 1) {
break
} else {
var td = document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
tableCreate();San*_*Ali 14
.map这是在 JavaScript 中使用该函数的最新方法。您在 html 中创建一个表格，然后使用 JavaScript 插入正文。
const data = [{Name:'Sydney', Day: 'Monday', Time: '10:00AM'},{Name:'New York', Day: 'Monday',Time: '11:00AM'},]; // any json data or array of objects
const tableData = data.map(value => {
return (
`<tr>
<td>${value.Name}</td>
<td>${value.Day}</td>
<td>${value.Time}</td>
</tr>`
);
}).join('');
const tableBody = document.querySelector("#tableBody");
tableBody.innerHTML = tableData;<table border="2">
<thead class="thead-dark">
<tr>
<th scope="col">Tour</th>
<th scope="col">Day</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>小智 9
function addTable() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i = 0; i < 3; i++) {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var j = 0; j < 4; j++) {
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}
addTable();<div id="myDynamicTable"></div>小智 5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table id="myTable" cellpadding="2" cellspacing="2" border="1" onclick="tester()"></table>
<script>
var student;
for (var j = 0; j < 10; j++) {
student = {
name: "Name" + j,
rank: "Rank" + j,
stuclass: "Class" + j,
};
var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = student.name,
cell2.innerHTML = student.rank,
cell3.innerHTML = student.stuclass;
}
</script>
</body>
</html>