Получить значение ввода, вложенного в таблицу - PullRequest
Новая
       8

Получить значение ввода, вложенного в таблицу

0 голосов
/ 14 октября 2018

У меня есть таблица, в которой в каждой строке есть две кнопки и вход, вложенный в ячейку div.Я должен быть в состоянии отфильтровать строки, где ввод не является целым числом.Код работал, пока я не добавил 4 строки, отмеченные звездочками (две кнопки).

<table id='myTable'>
{% for x in data %}
<tr>
<td style='max-width:175px;'>
  *<div style='display:-webkit-flex;display:flex;flex-wrap:nowrap;'>
    *<button name='plusminus' type="button" class="sub" style='display:none;'>-</button>
    <input type="text" class="form-control txtBox" style=max-width:90px; name="{{ x[2] }}" pattern="[0-9]{0,5}" title="Use only whole numbers. Eg 3 NOT 3.2" placeholder='Order...'>
    *<button name='plusminus' type="button" class="add" style='display:none;'>+</button>
  *</div>
</td>
</tr>
{% endfor %}
</table>

Проблема (я полагаю) заключается в 'firstElementChild' и 'firstChild' ниже, потому что, когда строки выше звездочки удалены, код работает нормально, указывая, что проблема - моя функцияуказывая на неправильный элемент. 

<script>
function displayorderguide() {
   var tbl = document.getElementById('myTable'),
      rows = tbl.tBodies[0].children, l = rows.length, i,
      filter = function(cells) {
   var values = [
      parseInt(cells[0].firstChild.nodeValue.replace(/,/g,''),10),
      parseFloat(cells[{{parprofiles|length}}+2].firstElementChild.value.replace(/,/g,''))
                 ];
   if( Number.isInteger(+values[1]) ) return true;
                                      return false;
                              };
    for( i=0; i<l; i++) {
         if( !filter(rows[i].cells)) rows[i].style.display = "";
                   }
        }
</script>

Я предполагаю, что мне нужно взглянуть на первый, чтобы получить div, а затем на второй, чтобы получить ввод (где раньше мне просто нужно было получить первый, чтобы получитьвход).

Я пытался заменить 'firstElementChild' на '.children[0].children[1]', но, похоже, это не сработало.

Итак, мой вопрос: как разобрать несколько уровней html, чтобы получитьк этому входу теперь, когда он вложен в div?

1 Ответ

0 голосов
/ 14 октября 2018

document.querySelectorAll('input.txtBox') должно работать нормально, учитывая предоставленный вами HTML.Обычно такие вещи, как firstElementChild, children и т. Д., Предназначены для случаев, когда у вас нет идентификаторов / классов для работы.

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

const rows = document.querySelectorAll('#myTable tr');
document.querySelectorAll('input.txtBox').forEach((input, i) => {
    if (!Number.isInteger(Number(input.value))) rows[i].style.display = 'none';
});

Простым английским языком:

  1. Получить все строки.
  2. Получить все входные данные и перебрать их.
  3. Если значение входного значения не является целым числом, применитьdisplay="none"; к связанной строке.
...