JS Получить данные из строки таблицы и занести их в переменные

Question

Всем привет, есть код:

function addNum(el) 
        {
            document.getElementById('RequestInfo').innerHTML = '<b>'+el.textContent+'</b>';
        }

Он получает данные из строки таблицы на которую мы нажали

<table class="table table-bordered table-hover table-striped">
<thead>
    <tr>
        <th>Код запроса</th>
        <th>Дата</th>
        <th>Тема</th>
        <th>Статус</th>
    </tr>
</thead>
<tbody>
    <?php
        foreach ($pageData['RequestDialogs'] as $key => $value)
            { ?>
            <tr data-toggle="collapse" data-target="#demo" data-ng-click="showEditForm(); getRequestsData(<?php echo $value['id']; ?>);" onclick=addNum(this)>
                <td><?php echo $value['request_id']; ?></td>
                <td><?php echo $value['request_data']; ?></td>
                <td><?php echo $value['request_title']; ?></td>
                <td><?php echo $value['support_stages']; ?></td>
                <?php
                ?>
            </tr>
    <?php } 
    ?>
</tbody>

И выводит содержимое строки таблицы одной строкой в RequestInfo. А как можно сделать, чтобы данные из ячеек строки таблицы записывались в переменные, а потом уже значения переменных выводились в нужных местах на странице?

Answer 1

Записывать в переменные - плохая идея. Что если строк будет 100 или 1000? Создавать свою переменную для каждой ячейки?

В этом случае, достаточно одной переменной, которая будет содержать массив значений ячеек. Использовать массив довольно просто - достаточно указать нужную строку и столбец (учтите, что в данном случае, нумерация начинается с 0 для столбцов, но для строк с 1, т.к. нулевая строка содержит заголовки колонок). PHP закомментировал, чтобы работал пример:

let aTable;

function fTableToArray() {
  aTable = [...document.querySelector('.table').rows].map((tr) => {
    return [...tr.cells].map((td) => td.textContent);
  });
  // aTable[Номер строки][Номер ячейки]
  console.info(aTable[1][2]); // request_title
}

window.addEventListener('load', fTableToArray);

function addNum(el) {
  document.getElementById('RequestInfo').innerHTML = '<b>' + el.textContent + '</b>';
}

<table class="table table-bordered table-hover table-striped">
<thead>
    <tr>
        <th>Код запроса</th>
        <th>Дата</th>
        <th>Тема</th>
        <th>Статус</th>
    </tr>
</thead>
<tbody>
    <!--?php
        foreach ($pageData['RequestDialogs'] as $key => $value)
            { ?-->
            <tr data-toggle="collapse" data-target="#demo" data-ng-click="showEditForm(); getRequestsData(<?php echo $value['id']; ?>);" onclick=addNum(this)>
                <td>request_id<!--?php echo $value['request_id']; ?--></td>
                <td>request_data<!--?php echo $value['request_data']; ?--></td>
                <td>request_title<!--?php echo $value['request_title']; ?--></td>
                <td>support_stages<!--?php echo $value['support_stages']; ?--></td>
                <!--?php
                ?-->
            </tr>
    <!--?php } 
    ?-->
</tbody>
</table>

В следующем примере, вместо номера столбца, нужно указывать его заголовок:

let aTable;

function fTableToArray() {
  let aRows = [...document.querySelector('.table').rows];
  let aTable = aRows.map((tr) => {
    let obj = {};
    [...tr.cells].forEach((td, i) => {
      obj[aRows[0].cells[i].textContent] = td.textContent;
    });
    return obj
  });
  // aTable[Номер строки][Заголовок столбца]
  console.info(aTable[1]['Статус']); // support_stages
}

window.addEventListener('load', fTableToArray);

function addNum(el) {
  document.getElementById('RequestInfo').innerHTML = '<b>' + el.textContent + '</b>';
}

<table class="table table-bordered table-hover table-striped">
<thead>
    <tr>
        <th>Код запроса</th>
        <th>Дата</th>
        <th>Тема</th>
        <th>Статус</th>
    </tr>
</thead>
<tbody>
    <!--?php
        foreach ($pageData['RequestDialogs'] as $key => $value)
            { ?-->
            <tr data-toggle="collapse" data-target="#demo" data-ng-click="showEditForm(); getRequestsData(<?php echo $value['id']; ?>);" onclick=addNum(this)>
                <td>request_id<!--?php echo $value['request_id']; ?--></td>
                <td>request_data<!--?php echo $value['request_data']; ?--></td>
                <td>request_title<!--?php echo $value['request_title']; ?--></td>
                <td>support_stages<!--?php echo $value['support_stages']; ?--></td>
                <!--?php
                ?-->
            </tr>
    <!--?php } 
    ?-->
</tbody>
</table>

БЛОГ НА HUSL

JS Получить данные из строки таблицы и занести их в переменные

Ответы (1 шт):