Блог

Главная - Вопросы по программированию - Есть ли какой-либо способ обновить данные (td) в строке на основе выбора в HTML?

Есть ли какой-либо способ обновить данные (td) в строке на основе выбора в HTML?

#javascript #html #jquery #css

Вопрос:

 <!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 все поля TD обновляются до значения ниже массива
var arrTd = [1,2,3,4,5,6,7,8,9,10]. Есть ли какой-либо способ добиться этого с помощью JavaScript?

Ответ №1:

Да, вы можете изменить таблицу с помощью API DOM. Вы можете найти все ячейки в строке с 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>
Метки: