изменить событие на несколько текстовых полей в модальном

Question

У меня есть таблица, и в каждой строке таблицы есть флажок, текстовое поле и поле имени. Ниже приводится html

<tr>
  <td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
  <td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
  <td>Name</td>
  <td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>

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

Answer 1

Пожалуйста, посмотрите

$("input[name='position']").keyup(function() {

  var valueOfInput = $(this).val(); //value
  var indexOfTr = $(this).parents('tr').index(); //index

  console.log(valueOfInput, '-->', indexOfTr);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
      <td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
      <td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
      <td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
      <td>Name</td>
    </tr>
  </tbody>
</table>

Answer 2

вы можете использовать имя в качестве массива и сделать общее имя класса для поля ввода ...

надеюсь, что это сработает ...

 $('.myclassname').on("keyup",function(){
        var row_index = $(this).closest("tr").index();
        // row_index = row_index-1; // if you have tr header then enable this also...
        var textvalue = $("[name='position[]']").eq(row_index).val();
        alert(textvalue);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
      <td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
      <td></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
      <td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
      <td>Name</td>
    </tr>
  </tbody>
</table>