需要组合数组元素以匹配需要打印到表格单元格中的id

喘息

我所拥有的是以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">&nbsp;</td>
        <td id="oneX2">&nbsp;</td>
        <td id="oneX3">&nbsp;</td>
        <td id="oneX4">&nbsp;</td>
        <td id="oneX5">&nbsp;</td>
        <td id="oneX6">&nbsp;</td>
        <td id="oneX7">&nbsp;</td>
        <td id="oneX8">&nbsp;</td>
        <td id="oneX9">&nbsp;</td>
        <td id="oneX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td id="twoX1">&nbsp;</td>
        <td id="twoX2">&nbsp;</td>
        <td id="twoX3">&nbsp;</td>
        <td id="twoX4">&nbsp;</td>
        <td id="twoX5">&nbsp;</td>
        <td id="twoX6">&nbsp;</td>
        <td id="twoX7">&nbsp;</td>
        <td id="twoX8">&nbsp;</td>
        <td id="twoX9">&nbsp;</td>
        <td id="twoX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td id="threeX1">&nbsp;</td>
        <td id="threeX2">&nbsp;</td>
        <td id="threeX3">&nbsp;</td>
        <td id="threeX4">&nbsp;</td>
        <td id="threeX5">&nbsp;</td>
        <td id="threeX6">&nbsp;</td>
        <td id="threeX7">&nbsp;</td>
        <td id="threeX8">&nbsp;</td>
        <td id="threeX9">&nbsp;</td>
        <td id="threeX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">4</th>
        <td id="fourX1">&nbsp;</td>
        <td id="fourX2">&nbsp;</td>
        <td id="fourX3">&nbsp;</td>
        <td id="fourX4">&nbsp;</td>
        <td id="fourX5">&nbsp;</td>
        <td id="fourX6">&nbsp;</td>
        <td id="fourX7">&nbsp;</td>
        <td id="fourX8">&nbsp;</td>
        <td id="fourX9">&nbsp;</td>
        <td id="fourX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">5</th>
        <td id="fiveX1">&nbsp;</td>
        <td id="fiveX2">&nbsp;</td>
        <td id="fiveX3">&nbsp;</td>
        <td id="fiveX4">&nbsp;</td>
        <td id="fiveX5">&nbsp;</td>
        <td id="fiveX6">&nbsp;</td>
        <td id="fiveX7">&nbsp;</td>
        <td id="fiveX8">&nbsp;</td>
        <td id="fiveX9">&nbsp;</td>
        <td id="fiveX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">6</th>
        <td id="sixX1">&nbsp;</td>
        <td id="sixX2">&nbsp;</td>
        <td id="sixX3">&nbsp;</td>
        <td id="sixX4">&nbsp;</td>
        <td id="sixX5">&nbsp;</td>
        <td id="sixX6">&nbsp;</td>
        <td id="sixX7">&nbsp;</td>
        <td id="sixX8">&nbsp;</td>
        <td id="sixX9">&nbsp;</td>
        <td id="sixX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">7</th>
        <td id="sevenX1">&nbsp;</td>
        <td id="sevenX2">&nbsp;</td>
        <td id="sevenX3">&nbsp;</td>
        <td id="sevenX4">&nbsp;</td>
        <td id="sevenX5">&nbsp;</td>
        <td id="sevenX6">&nbsp;</td>
        <td id="sevenX7">&nbsp;</td>
        <td id="sevenX8">&nbsp;</td>
        <td id="sevenX9">&nbsp;</td>
        <td id="sevenX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">8</th>
        <td id="eightX1">&nbsp;</td>
        <td id="eightX2">&nbsp;</td>
        <td id="eightX3">&nbsp;</td>
        <td id="eightX4">&nbsp;</td>
        <td id="eightX5">&nbsp;</td>
        <td id="eightX6">&nbsp;</td>
        <td id="eightX7">&nbsp;</td>
        <td id="eightX8">&nbsp;</td>
        <td id="eightX9">&nbsp;</td>
        <td id="eightX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">9</th>
        <td id="nineX1">&nbsp;</td>
        <td id="nineX2">&nbsp;</td>
        <td id="nineX3">&nbsp;</td>
        <td id="nineX4">&nbsp;</td>
        <td id="nineX5">&nbsp;</td>
        <td id="nineX6">&nbsp;</td>
        <td id="nineX7">&nbsp;</td>
        <td id="nineX8">&nbsp;</td>
        <td id="nineX9">&nbsp;</td>
        <td id="nineX10">&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">10</th>
        <td id="tenX1">&nbsp;</td>
        <td id="tenX2">&nbsp;</td>
        <td id="tenX3">&nbsp;</td>
        <td id="tenX4">&nbsp;</td>
        <td id="tenX5">&nbsp;</td>
        <td id="tenX6">&nbsp;</td>
        <td id="tenX7">&nbsp;</td>
        <td id="tenX8">&nbsp;</td>
        <td id="tenX9">&nbsp;</td>
        <td id="tenX10">&nbsp;</td>
    </tr>

</table> 

我还为循环嵌套了非常基本的乘法:

    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,直到现在才真正接触过它。我应该循环数组吗?我不知道。

妮娜·斯科茨(Nina Scholz)

使用给定的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; }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

PHP需要嵌套数组值转储到html表格单元格中

需要查看数组中是否存在单元格的值

需要帮助来更改Google表格脚本中的单元格值以匹配另一个单元格

Google表格-需要匹配的三个单元格(每5个单元格)的公式

复制单元格1的元素以匹配单元格2的长度

在VBA中按列打印到Excel单元格

不需要的表格单元格边框

表格单元格中的打印表格未对齐

我需要在Google表格中的单元格上记录数据更改

需要从Google表格单元格中列出的段落中提取某些数据

我需要实时过滤表格单元格(在 html jQuery 中)

需要遍历数组中的单元格,并将每个单元格的值设置为其坐标的乘积

在 Google 表格单元格 (GAS) 中打印未指定数量的数组内容

使用 for 循环在单个表格单元格中显示数组的所有元素

VBA Excel 使用数组元素引用 Word 文档表格中的单元格

Angular 1.5 在表格单元格中显示数组的多个元素

将数组中的元素分配给每个表格单元格

在PDFLib 9表格单元格中打印RTF文本

需要使用 VBA 获取 Excel 单元格行中的所有 ID

匹配不同 Google 表格中的单元格值

Excel打印组合单元格

如何比较Excel中单元格的值然后将结果打印到其他单元格

需要总结一个单元格中的值,这些值由谷歌表格中的“加法”符号分隔

Javascript在表格单元格中查找选择元素

如何在表格单元格中定位元素?

如何对齐表格单元格(<td>)中的元素?

如何在表格单元格中获取元素?

如何在框元素中定位表格单元格

在表格单元格元素中创建垂直间隙