Проверить длину динамического текстового поля

Question

У меня есть динамическая таблица, которая содержит несколько текстовых полей. Мне нужно, чтобы текстовое поле B имело максимум 6 вводимых чисел и выдает ошибку, если введенное значение меньше и не равно 6. Пожалуйста, помогите Im новичок в javascript

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);


  row.insertCell(0).innerHTML = '<input type="text" name="A" size="20" maxlength="6" required/>';
  row.insertCell(1).innerHTML = '<input type="text" name="B" size="20" required/>';
  row.insertCell(2).innerHTML = '<input type="text" name="C" size="20" required/>';

}

<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
<table id="bod">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
</table>

Answer 1

Создать input вручную и addEventListener к нему. Как то так.

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  row.insertCell(0).innerHTML = '<input type="text" name="A" size="20" maxlength="6" required/>';
  var colB = row.insertCell(1);
  var inp = document.createElement('input');
  inp.type = 'text';
  inp.name = 'B';
  inp.size = 20;
  inp.required = true;
  colB.appendChild(inp);
  inp.addEventListener('change', function() {
    if (this.value.length !== 6) {
      alert('wrong value');
      this.focus();
    }
  });
  row.insertCell(2).innerHTML = '<input type="text" name="C" size="20" required/>';

}

<input type="button" id="add" value="Add" onclick="addRow()">
<table id="bod">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
</table>