Question

我希望表格中每列的标题为“A”，“B”，“C”等，我希望能够更改有多少列，所以我想使用循环。代码到目前为止：

JavaScript的：

<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
for (var count = 0; count <= Rows; count++) {
    var header = table.createTHead(0);
    var row = header.insertRow(0); 
    var character = String.fromCharCode(65 + count);
    var cell = row.insertCell(count);
    cell.innerHTML =('<b>'+character+'</b>');
}
</script>

HTML：

<div id='div1'><table id="dtable"></table></div>

Answer 1

您在每个列的标题中创建了一行。将thead创建移动到循环外部会修复它。

＆＃13;

document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var header = table.createTHead(0);
var row = header.insertRow(0); 
Rows = 4
for (var count = 0; count <= Rows; count++) {
    var character = String.fromCharCode(65 + count);
    var cell = row.insertCell(count);
    cell.innerHTML =('<b>'+character+'</b>');
}

＆＃13;

<div id='div1'><table id="dtable"></table></div>

＆＃13;

Answer 2

你不想在循环中创建一个新行吗？将头部和行创建移动到循环外部。

像：

<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
var header = table.createTHead(0);
var row = header.insertRow(0); 
for (var count = 0; count <= Rows; count++) { 
    var character = String.fromCharCode(65 + count);
    var cell = row.insertCell(count);
    cell.innerHTML =('<b>'+character+'</b>');
}
</script>

如果您希望它看起来像带有边框的表格，那么您必须添加css样式但是应该打印b c d e

Answer 3

@Dilly，使用这个小提琴......对于帖子的许多其他答案 - 你需要创建一行一次和列多次你想要...所以循环列而不是行。这也提醒我告诉你 - 请不要使用循环计数变量名称作为混乱的“行”。你应该命名 - 例如numOfColumns。

感谢评论，我添加了这篇评论。

https://jsfiddle.net/shemdani/xjpekb94/1/

document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
var row = table.insertRow(0); 
Rows = 4
for (var count = 0; count < Rows; count++) {
    var character = String.fromCharCode(65 + count);
    var cell = row.insertCell(count);
    cell.innerHTML =('<b>'+character+'</b>');
}

Answer 4

您的问题是您正在for循环中创建标题和行，这意味着您每次都会创建一个新行，这会导致row.insertCell出现问题。第一次迭代是有效的，因为您在第0个位置插入一个单元格，但循环的第二次迭代尝试在第一个位置插入一个单元格，当第0个位置单元格不存在时，因此它会抛出错误。试试这个，它应该适合你：

＆＃13;

document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var Rows = 4;
var header = table.createTHead(0);
var row = header.insertRow(0); 

for (var count = 0; count <= Rows; count++) {
    var character = String.fromCharCode(65 + count);
    var cell = row.insertCell(count);
    cell.innerHTML =('<b>'+character+'</b>');
}

＆＃13;

<div id='div1'><table id="dtable"></table></div>

＆＃13;

使用循环为表上的每列创建标题。 JavaScript的

4 个答案: