我所拥有的是一个用HTML编码的表格，它有10行10列，每个单元格都有自己的ID：
<table id="ch4">
<caption>
Multiplication Table
</caption>
<tbody>
<tr>
<th scope="col">*</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col">10</th>
</tr>
<tr>
<th scope="row">1</th>
<td id="oneX1"> </td>
<td id="oneX2"> </td>
<td id="oneX3"> </td>
<td id="oneX4"> </td>
<td id="oneX5"> </td>
<td id="oneX6"> </td>
<td id="oneX7"> </td>
<td id="oneX8"> </td>
<td id="oneX9"> </td>
<td id="oneX10"> </td>
</tr>
<tr>
<th scope="row">2</th>
<td id="twoX1"> </td>
<td id="twoX2"> </td>
<td id="twoX3"> </td>
<td id="twoX4"> </td>
<td id="twoX5"> </td>
<td id="twoX6"> </td>
<td id="twoX7"> </td>
<td id="twoX8"> </td>
<td id="twoX9"> </td>
<td id="twoX10"> </td>
</tr>
<tr>
<th scope="row">3</th>
<td id="threeX1"> </td>
<td id="threeX2"> </td>
<td id="threeX3"> </td>
<td id="threeX4"> </td>
<td id="threeX5"> </td>
<td id="threeX6"> </td>
<td id="threeX7"> </td>
<td id="threeX8"> </td>
<td id="threeX9"> </td>
<td id="threeX10"> </td>
</tr>
<tr>
<th scope="row">4</th>
<td id="fourX1"> </td>
<td id="fourX2"> </td>
<td id="fourX3"> </td>
<td id="fourX4"> </td>
<td id="fourX5"> </td>
<td id="fourX6"> </td>
<td id="fourX7"> </td>
<td id="fourX8"> </td>
<td id="fourX9"> </td>
<td id="fourX10"> </td>
</tr>
<tr>
<th scope="row">5</th>
<td id="fiveX1"> </td>
<td id="fiveX2"> </td>
<td id="fiveX3"> </td>
<td id="fiveX4"> </td>
<td id="fiveX5"> </td>
<td id="fiveX6"> </td>
<td id="fiveX7"> </td>
<td id="fiveX8"> </td>
<td id="fiveX9"> </td>
<td id="fiveX10"> </td>
</tr>
<tr>
<th scope="row">6</th>
<td id="sixX1"> </td>
<td id="sixX2"> </td>
<td id="sixX3"> </td>
<td id="sixX4"> </td>
<td id="sixX5"> </td>
<td id="sixX6"> </td>
<td id="sixX7"> </td>
<td id="sixX8"> </td>
<td id="sixX9"> </td>
<td id="sixX10"> </td>
</tr>
<tr>
<th scope="row">7</th>
<td id="sevenX1"> </td>
<td id="sevenX2"> </td>
<td id="sevenX3"> </td>
<td id="sevenX4"> </td>
<td id="sevenX5"> </td>
<td id="sevenX6"> </td>
<td id="sevenX7"> </td>
<td id="sevenX8"> </td>
<td id="sevenX9"> </td>
<td id="sevenX10"> </td>
</tr>
<tr>
<th scope="row">8</th>
<td id="eightX1"> </td>
<td id="eightX2"> </td>
<td id="eightX3"> </td>
<td id="eightX4"> </td>
<td id="eightX5"> </td>
<td id="eightX6"> </td>
<td id="eightX7"> </td>
<td id="eightX8"> </td>
<td id="eightX9"> </td>
<td id="eightX10"> </td>
</tr>
<tr>
<th scope="row">9</th>
<td id="nineX1"> </td>
<td id="nineX2"> </td>
<td id="nineX3"> </td>
<td id="nineX4"> </td>
<td id="nineX5"> </td>
<td id="nineX6"> </td>
<td id="nineX7"> </td>
<td id="nineX8"> </td>
<td id="nineX9"> </td>
<td id="nineX10"> </td>
</tr>
<tr>
<th scope="row">10</th>
<td id="tenX1"> </td>
<td id="tenX2"> </td>
<td id="tenX3"> </td>
<td id="tenX4"> </td>
<td id="tenX5"> </td>
<td id="tenX6"> </td>
<td id="tenX7"> </td>
<td id="tenX8"> </td>
<td id="tenX9"> </td>
<td id="tenX10"> </td>
</tr>
</table>
我还有非常基本的乘法嵌套for循环：
for(var i=1; i <=10 ; i++){
for(var j=1; j<=10; j++){
document.writeln(i * j);
}
}
我知道我的应用程序不正确，但你必须从某个地方开始。
基本上我需要做的是将此循环的输出放入相应的表格单元格中，以获得如下所示的结果：
x 1 2 3 4 5 6 7 8 9 10
1 1 2 3 4 5 6 7 8 9 10
2 2 4 6 8 10 12 14 16 18 20
3 3 6 9 12 15 18 21 24 27 30
4 4 8 12 16 20 24 28 32 36 40
5 5 10 15 20 25 30 35 40 45 50
6 6 12 18 24 30 36 42 48 54 60
7 7 14 21 28 35 42 49 56 63 70
8 8 16 34 32 40 48 56 64 72 80
9 9 18 27 36 45 54 63 72 81 90
10 10 20 30 40 50 60 70 80 90 100
我遇到的一个问题是，要获取脚本中的所有表格单元格ID，我必须组合两个数组以匹配id。
var rowID = ['zeroX', 'oneX', 'twoX', 'threeX', 'fourX', 'fiveX', 'sixX', 'sevenX', 'eightX', 'nineX', 'tenX'];
var colID = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
var combID = " ";
我很困惑如何这样做。我是新的Javascript，直到现在才真正触及它。我应该循环数组吗？我不知道。
答案 0 :(得分：1)
使用给定的HTML表格，您只需迭代给定的数组以获取ID并将值赋给innerHTML。
var rowID = ['zeroX', 'oneX', 'twoX', 'threeX', 'fourX', 'fiveX', 'sixX', 'sevenX', 'eightX', 'nineX', 'tenX'],
colID = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
table = document.createElement('table'),
tr, td,
i, j;
for (i = 1; i <= rowID.length; i++) {
for (j = 1; j < colID.length; j++) {
document.getElementById(rowID[i] + colID[j]).innerHTML = i * j;
}
}
您可以通过迭代给定的数组来创建包含所需部分的表。
var rowID = ['zeroX', 'oneX', 'twoX', 'threeX', 'fourX', 'fiveX', 'sixX', 'sevenX', 'eightX', 'nineX', 'tenX'],
colID = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
table = document.createElement('table'),
tr, td,
i, j;
for (i = 0; i <= rowID.length; i++) {
tr = document.createElement('tr');
for (j = 0; j < colID.length; j++) {
td = document.createElement(i && j ? 'td' : 'th');
td.id = rowID[i] + colID[j];
if (i === 0 && j === 0) {
value = 'x';
} else if (i && j) {
value = i * j
} else {
value = i + j;
}
td.appendChild(document.createTextNode(value));
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);td { text-align: right; }
答案 1 :(得分：0)
使用您创建的阵列：
for(var i=0; i <10 ; i++){
for(var j=0; j<10; j++){
//for printing out first row/column:
var product = i==0 ? ( j==0 ? 'x' : j ) : ( j==0 ? i : 0 );
if(product==0)
product = i*j;
document.getElementById( rowID[ i+1 ] + colID[j+1] ).innerHTML = product;
}
}
代替colID数组，您可以使用数组索引加一。
答案 2 :(得分：0)
如果表格已经按照您显示的格式生成，则您无需设置ID即可进行设置。只需使用querySelectorAll()或类似方法获取表格的所有单元格，然后使用该集合中单元格的索引迭代该集合设置，作为计算该单元格数量的方法。
var table = document.querySelector('#ch4');
//colSize is number of child td elements in the row (minus the th elements)
var colSize = table.querySelector('tr').children.length-1;
var list = table.querySelectorAll('td');
list.forEach((element,index)=>{
index+=1;
var row = Math.ceil(index / colSize);
var col = index % colSize;
element.innerText = (col?col:colSize) * row;
});td {
text-align:center;
}<table id="ch4">
<caption>
Multiplication Table
</caption>
<tbody>
<tr>
<th scope="col">*</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col">10</th>
</tr>
<tr>
<th scope="row">1</th>
<td id="oneX1"> </td>
<td id="oneX2"> </td>
<td id="oneX3"> </td>
<td id="oneX4"> </td>
<td id="oneX5"> </td>
<td id="oneX6"> </td>
<td id="oneX7"> </td>
<td id="oneX8"> </td>
<td id="oneX9"> </td>
<td id="oneX10"> </td>
</tr>
<tr>
<th scope="row">2</th>
<td id="twoX1"> </td>
<td id="twoX2"> </td>
<td id="twoX3"> </td>
<td id="twoX4"> </td>
<td id="twoX5"> </td>
<td id="twoX6"> </td>
<td id="twoX7"> </td>
<td id="twoX8"> </td>
<td id="twoX9"> </td>
<td id="twoX10"> </td>
</tr>
<tr>
<th scope="row">3</th>
<td id="threeX1"> </td>
<td id="threeX2"> </td>
<td id="threeX3"> </td>
<td id="threeX4"> </td>
<td id="threeX5"> </td>
<td id="threeX6"> </td>
<td id="threeX7"> </td>
<td id="threeX8"> </td>
<td id="threeX9"> </td>
<td id="threeX10"> </td>
</tr>
<tr>
<th scope="row">4</th>
<td id="fourX1"> </td>
<td id="fourX2"> </td>
<td id="fourX3"> </td>
<td id="fourX4"> </td>
<td id="fourX5"> </td>
<td id="fourX6"> </td>
<td id="fourX7"> </td>
<td id="fourX8"> </td>
<td id="fourX9"> </td>
<td id="fourX10"> </td>
</tr>
<tr>
<th scope="row">5</th>
<td id="fiveX1"> </td>
<td id="fiveX2"> </td>
<td id="fiveX3"> </td>
<td id="fiveX4"> </td>
<td id="fiveX5"> </td>
<td id="fiveX6"> </td>
<td id="fiveX7"> </td>
<td id="fiveX8"> </td>
<td id="fiveX9"> </td>
<td id="fiveX10"> </td>
</tr>
<tr>
<th scope="row">6</th>
<td id="sixX1"> </td>
<td id="sixX2"> </td>
<td id="sixX3"> </td>
<td id="sixX4"> </td>
<td id="sixX5"> </td>
<td id="sixX6"> </td>
<td id="sixX7"> </td>
<td id="sixX8"> </td>
<td id="sixX9"> </td>
<td id="sixX10"> </td>
</tr>
<tr>
<th scope="row">7</th>
<td id="sevenX1"> </td>
<td id="sevenX2"> </td>
<td id="sevenX3"> </td>
<td id="sevenX4"> </td>
<td id="sevenX5"> </td>
<td id="sevenX6"> </td>
<td id="sevenX7"> </td>
<td id="sevenX8"> </td>
<td id="sevenX9"> </td>
<td id="sevenX10"> </td>
</tr>
<tr>
<th scope="row">8</th>
<td id="eightX1"> </td>
<td id="eightX2"> </td>
<td id="eightX3"> </td>
<td id="eightX4"> </td>
<td id="eightX5"> </td>
<td id="eightX6"> </td>
<td id="eightX7"> </td>
<td id="eightX8"> </td>
<td id="eightX9"> </td>
<td id="eightX10"> </td>
</tr>
<tr>
<th scope="row">9</th>
<td id="nineX1"> </td>
<td id="nineX2"> </td>
<td id="nineX3"> </td>
<td id="nineX4"> </td>
<td id="nineX5"> </td>
<td id="nineX6"> </td>
<td id="nineX7"> </td>
<td id="nineX8"> </td>
<td id="nineX9"> </td>
<td id="nineX10"> </td>
</tr>
<tr>
<th scope="row">10</th>
<td id="tenX1"> </td>
<td id="tenX2"> </td>
<td id="tenX3"> </td>
<td id="tenX4"> </td>
<td id="tenX5"> </td>
<td id="tenX6"> </td>
<td id="tenX7"> </td>
<td id="tenX8"> </td>
<td id="tenX9"> </td>
<td id="tenX10"> </td>
</tr>
</table>