我正在尝试创建表并使用 Javascript 将 id 和内容放入其中。
用 '' 覆盖的字符是 char(月份的第一个或第二个字母)，n 是在 for loo 运行时更改的数字。另外，我必须将++n 值填充到 td class='firstLine' 中。
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/mydiary.css">
</head>
<body>
<script type="text/javascript">
var x = 32;
var n = 0;
document.write("<table>");
for(i = 0; i<x; i++){
document.write("<tr>");
document.write("<td class='firstLine'>/*++n value*/</td>");
document.write("<td id='j'+n></td>");
document.write("<td id='f'+n></td>");
document.write("<td id='m'+n></td>");
document.write("<td id='a'+n></td>");
document.write("<td id='ma'+n></td>");
document.write("<td id='ju'+n></td>");
document.write("<td id='jl'+n></td>");
document.write("<td id='au'+n></td>");
document.write("<td id='s'+n></td>");
document.write("<td id='o'+n></td>");
document.write("<td id='n'+n></td>");
document.write("<td id='d'+n></td>");
document.write("</tr>");
n++;
};
document.write("</table>");
</script>
</body>
</html>
最佳答案
在您的代码中，您正在递增 n两次(如果这是基于意图):在表格开头一次 ++n另一个表行末尾写有 n++ 。你需要做的就是简单地执行n++在开始时。
此外，关于将 ID 附加到您的 <td>元素，请记住您只是执行字符串连接，因此这将起作用:
document.write("<td id='j"+n+"'></td>");
如果您熟悉模板文字，那么可读性会更好:
document.write(`<td id="j${n}"></td>`);
请参阅下面的概念验证:
var x = 32;
var n = 0;
document.write("<table>");
for (i = 0; i < x; i++) {
n++;
document.write("<tr>");
document.write("<td class='firstLine'>"+n+"</td>");
document.write("<td id='j"+n+"'></td>");
document.write("<td id='f"+n+"'></td>");
document.write("<td id='m"+n+"'></td>");
document.write("<td id='a"+n+"'></td>");
document.write("<td id='ma"+n+"'></td>");
document.write("<td id='ju"+n+"'></td>");
document.write("<td id='jl"+n+"'></td>");
document.write("<td id='au"+n+"'></td>");
document.write("<td id='s"+n+"'></td>");
document.write("<td id='o"+n+"'></td>");
document.write("<td id='n"+n+"'></td>");
document.write("<td id='d"+n+"'></td>");
document.write("</tr>");
};
document.write("</table>");/** For stylistics only **/
td {
border: 1px solid;
padding: .5em 1em;
}优化说明
如果您确实想优化代码，这里还有一些技巧:
- 使用
document.body.append(...)而不是使用document.write，因为它会覆盖体内的所有内容 - 当您构建一个相当大的表时，使用 DocumentFragment 可能是有意义的API。
以下是代码优化版本的示例:
var x = 32;
var n = 0;
// Create empty table
var table = document.createElement('table');
// Create fragment to hold all the rows
var fragment = document.createDocumentFragment();
for (var i = 0; i < x; i++) {
n++;
// Create row and an array of months
var row = document.createElement('tr');
var months = ['j', 'f', 'm', 'a', 'ma', 'ju', 'jl', 'au', 's', 'o', 'n', 'd'];
// Create and Append first cell into row
var firstCell = document.createElement('td');
firstCell.classList.add('firstLine');
firstCell.textContent = n;
row.appendChild(firstCell);
// Create and Append all months into each row
months.forEach(function(month) {
var cell = document.createElement('td');
cell.id = month + n;
row.appendChild(cell);
});
// Now we are done with the row
// Append row into the document fragment
fragment.appendChild(row);
};
// Now the document fragment is ready to use
// Append entire fragment into table element
table.appendChild(fragment);
// Now the table element is ready to use
// Append entire table into body element
document.body.appendChild(table);/** For stylistics only **/
td {
border: 1px solid;
padding: .5em 1em;
}关于javascript - 使用javascript自动将id和内容放入表td中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54457748/