如何在Javascript中垂直填充数据单元格

How to populate data cells in Javascript vertically?

本文关键字：填充 数据 单元格 垂直 Javascript      更新时间：2023-09-26

我在HTML中有这个(name, value)表，我想在一些计算后填充'value'列。

在加载网页时，'name'列已填满，'value'列仍为空白。

在执行了一些计算之后，我想为与'name'对应的每一行依次填充'value'列。从1 -> n.

我的页面是做什么的:

  1. 从用户处获取号码(例如3)
  2. 打印一个3行对的表，value列留空。
  3. 执行一些计算并将其存储在名为'value'的数组中。

下一步:

我想为存储在'value'数组中的每个元素填充'value'列，顺序地，即从1 -> n。

下面是一些代码:

JavaScript -根据开始收到的数字动态创建表 

var playerTable = document.getElementById("player_table");
var player_table_row, player_table_datacell1, player_table_datacell2;
var value;
    //no_of_players contains the number of rows
    for ( var i = 0; i < no_of_players; i++)
    {
        //inserts i'th row
        player_table_row = playerTable.insertRow(i);
        //Insert first datacell for the row
        player_table_datacell1 = player_table_row.insertCell( 0 );
        //Insert second datacell for the row
        player_table_datacell2 = player_table_row.insertCell( 1 );
        //Inserts the name for the i'th row in the 'name' column
        //players_list is the array containing all the names
        player_table_datacell1.innerHTML = players_list[i];
        //Leave the second cell i.e. 'value' column blank
        player_table_datacell2.innerHTML = "";

        value[i] = /* Some computations */
    }

表的HTML代码，很简单

<table id = "player_table">
    <th>Name</th>
    <th>Value</th>
</table>
预期输出:

Name    Value
A       5
B       2
C       19

我已经提前计算了这些值5,2,19，现在只需要将它们填充到HTML表中。我当前的表是这样的:

Name    Value
A       
B       
C

我假设您的计算需要某种用户输入。这就是为什么，您不能在进行计算后，用Name和计算值向表中添加行。

这里有一种方法。我只是为每个值单元格设置id，并使用id进行更新。希望能有所帮助:)

<body>
    <table id = "player_table">
        <thead>
            <th>Name</th>
            <th>Value</th>
        </thead>
    </table>
    <script type="text/javascript">
        process();
        function process() {
            var playerTable = document.getElementById("player_table");
            var player_table_row, player_table_datacell1, player_table_datacell2;
            var value;
            //hard coding for testing purposes
            no_of_players = 3;
            var players_list = ["A", "B", "C"];
            //no_of_players contains the number of rows
            for (var i = 0; i < no_of_players; i++) {
                //inserts i'th row
                player_table_row = playerTable.insertRow(i + 1);
                //Insert first datacell for the row
                player_table_datacell1 = player_table_row.insertCell(0);
                //Insert second datacell for the row
                player_table_datacell2 = player_table_row.insertCell(1);
                player_table_datacell2.id = "value_cell_" + String(i);
                //Inserts the name for the i'th row in the 'name' column
                //players_list is the array containing all the names
                player_table_datacell1.innerHTML = players_list[i];
                //Leave the second cell i.e. 'value' column blank
                player_table_datacell2.innerHTML = "";
                //value[i] = /* Some computations */
            }
            value = ["100", "200", "300"]; //hard coding for testing purposes
            updateValueColumn(value);
        }
        function updateValueColumn(value) {
            var value_cell;
            for (var i = 0; i < value.length; i++) {
                value_cell = document.getElementById("value_cell_" + String(i));
                value_cell.innerHTML = value[i];
            }
        }    
    </script>
</body>

生成的表如下:

<table id = "player_table">
  <tr>
    <th>Name</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>A</td>
    <td></td>
  </tr>
  <tr>
    <td>B</td>
    <td></td>
  </tr>
  <tr>
    <td>C</td>
    <td></td>
  </tr>
</table>

您可以使用以下代码将第二列作为数组:

var valueCells = document.querySelectorAll("#player_table tr td:nth-child(2)");

然后在某个循环中为每个单元格设置innerHTML。

valueCells[i].innerHTML = value[i];
相关文章：