有没有办法根据 HTML 中的选择来更新行中的数据（td）？答案

【问题标题】：Is there any way to update data (td) in row based on choice selection in HTML?有没有办法根据 HTML 中的选择来更新行中的数据（td）？
【发布时间】：2021-06-01 17:28:46
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="app.css">
    <title>Test Row</title>
</head>
<body>

    <table style="width:100%">
        <thead>
        <tr>
        <th>#</th><th>Service Name</th><th>Chart Number</th><th>intgus1</th><th>qaus1</th><th>loadus1</th><th>appstaging</th><th>produs1</th><th>prodeu1</th><th>prodeu2</th><th>prodca1</th><th>prodanz1</th><th>prodsg1</th>
        </tr>
        </thead>

        <tr id = "itemsmodel">
            <td>1</td><td>activity-registry</td>
            <td>
                <select id="NumberOfModels" onchange="getValue(this)"><option value="$">Chart Version</option><option value="0.1.22" selected>0.1.22</option><option value="0.1.23" selected>0.1.23</option><option value="0.1.29" selected>0.1.29</option></select>
            </td>
                <td>0</td><td></td><td>26</td><td></td><td>26</td><td>31</td><td>31</td><td></td><td>31</td><td></td>
        </tr>
    </table>

    <script type="text/javascript">

    // Let's say on the selectoin of chart 0.1.23, all the TD field update to below array
    var arrTd = [1,2,3,4,5,6,7,8,9,10]

    </script>

</body>
</html>

假设在图表 0.1.23 的 selectoin 上，所有 TD 字段更新到下面的数组 var arrTd = [1,2,3,4,5,6,7,8,9,10]。有什么方法可以使用 JavaScript 来实现吗？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

是的，您可以使用DOM API 修改表。您可以找到document.querySelectorAll所在行中的所有单元格，并设置更改innerText的新内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="app.css">
    <title>Test Row</title>
</head>
<body>

    <table style="width:100%">
        <thead>
        <tr>
        <th>#</th><th>Service Name</th><th>Chart Number</th><th>intgus1</th><th>qaus1</th><th>loadus1</th><th>appstaging</th><th>produs1</th><th>prodeu1</th><th>prodeu2</th><th>prodca1</th><th>prodanz1</th><th>prodsg1</th>
        </tr>
        </thead>

        <tr id = "itemsmodel">
            <td>1</td><td>activity-registry</td>
            <td>
                <select id="NumberOfModels" onchange="getValue(this)"><option disabled>Chart Version</option><option value="0.1.22">0.1.22</option><option value="0.1.23">0.1.23</option><option value="0.1.29" selected>0.1.29</option></select>
            </td>
                <td>0</td><td></td><td>26</td><td></td><td>26</td><td>31</td><td>31</td><td></td><td>31</td><td></td>
        </tr>
    </table>

    <script type="text/javascript">

    const arrTd = {
      '0.1.22': [0,2,3,4,5,6,7,8,9,10],
      '0.1.23': [1,2,3,4,5,6,7,8,9,10],
      '0.1.29': [1,'',3,'',5,'',7,'',9,'']
    };

    function getValue(t) {
      const cells = document.querySelectorAll('tr#itemsmodel td');
      arrTd[t.value].forEach((value, idx) => cells[idx + 3].innerText = value);
    }
    </script>

</body>
</html>

【讨论】：