Перебор всех строк таблицы

122
15 октября 2021, 10:00

Есть некоторая таблица

<table id="aircasestable" border="0" bgcolor="#e0ecf8" width="218" cellpadding="0" cellspancing="2">
  <tbody>
    <tr>
      <td width="70" align="center" style="font-size:11px;" bgcolor="#E3E3E3">Container No</td>
      <td width="130" align="center" style="font-size:11px;" bgcolor="#E3E3E3">Case No</td>
    </tr>
    <tr id="EFLH191022000002" value="CAXU9059282!EFLH191022000002!86110H0000">
      <td width="70" align="center" style="font-size:11px;">CAXU9059282</td>
      <td width="130" align="center" style="font-size:11px;">EFLH191022000002</td>
    </tr>
    <tr id="EFLH191022000001" value="CAXU9059282!EFLH191022000001!86110H0000">
      <td width="70" align="center" style="font-size:11px;">CAXU9059282</td>
      <td width="130" align="center" style="font-size:11px;">EFLH191022000001</td>
    </tr>
  </tbody>
</table>

Предположим, я хочу перебрать значения всех строк в цикле и сцепить их (для примера).

            var casetab = document.getElementById("aircasestable");
            document.frm.txthiddenworkedcase.value = "";
            for (var i = 0; i < casetab.length; i++) {
                document.frm.txthiddenworkedcase.value = document.frm.txthiddenworkedcase.value + "|" + casetab.rows[i].value;
            }

Но по итогу, input, в который я хочу положить их объединение остается пустым.

<input type="hidden" name="txthiddenworkedcase" id="Hidden3" value="">

Что не так в сцепляющем цикле? При этом, консоль не ругается на какие-либо ошибки.

Answer 1

const rStrings = [...document.querySelectorAll('tr[value]')] 
  .map(tr => tr.getAttribute('value'));  
document.querySelector('input').value = rStrings.join('|'); 
<table id="aircasestable" border="0" bgcolor="#e0ecf8" width="218" cellpadding="0" cellspancing="2"> 
  <tbody> 
    <tr> 
      <td width="70" align="center" style="font-size:11px;" bgcolor="#E3E3E3">Container No</td> 
      <td width="130" align="center" style="font-size:11px;" bgcolor="#E3E3E3">Case No</td> 
    </tr> 
    <tr id="EFLH191022000002" value="CAXU9059282!EFLH191022000002!86110H0000"> 
      <td width="70" align="center" style="font-size:11px;">CAXU9059282</td> 
      <td width="130" align="center" style="font-size:11px;">EFLH191022000002</td> 
    </tr> 
    <tr id="EFLH191022000001" value="CAXU9059282!EFLH191022000001!86110H0000"> 
      <td width="70" align="center" style="font-size:11px;">CAXU9059282</td> 
      <td width="130" align="center" style="font-size:11px;">EFLH191022000001</td> 
    </tr> 
  </tbody> 
</table> 
<br> 
<input readonly size="80">

Answer 2
document.getElementById("aircasestable").getElementsByTagName("TR")
  • вероятно, вы хотели сделать это. Потому что ваш текущий код находит не строки, а таблицу, и соответственно, это 1 элемент, а не массив элементов.
READ ALSO
Задача на рекурсию в JavaScript [закрыт]
javascript

Задача на рекурсию в JavaScript [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 285
Скрыть блок при нажатии вне его
jQuery

Скрыть блок при нажатии вне его

Есть два input-а реализованные, как selectЕсли кликаем на первый блок, затем на второй, то первый должен закрываться У них одинаковые классы

 142
WPF не работает MinWidth/MinHeight
c#

WPF не работает MinWidth/MinHeight

Не работает MinWidth/MinHeightЧто делать? Xaml: 1) Работает

 121
Unity возврат структуры из метода
c#

Unity возврат структуры из метода

вот пример метода, я хочу узнать что он вернёт, копию структуры или саму структуру и если он вернёт копию то как мне получить сам объект

 163