javascript - 从表中的输入获取数据

Question

大家好，我正在尝试获取表中输入的值，问题是我通过按钮动态创建新行，这些获取新的 ID 和所有内容。

我通过 blur 事件获取值，但是这个事件仅在主输入失去焦点时获取值，但获取第二个输入的数据(如果我已经创建一个新的)

我想在正确输入失去焦点时获取数据

我的 table

<table class="table table-striped table-bordered" id="tabla_transferencia">
    <thead>
         <tr>
             <th style="width: 80px">Codigo</th>
             <th style="width: 500px">Descripción</th>
             <th>Existencias</th>
             <th>Cantidad</th>
             <th>Costo/Unit</th>
             <th style="width: 40px">Total</th>
             <th></th>
         </tr>
     </thead>
     <tbody>
         <tr id='row0'>
             <td>
                 <input type="text" id="txt_transferencia_codigo0" placeholder="Ingese el código"/>
             </td>
             <td>
                 <label id="lbl_transferencia_descripcion"/>
             </td>
             <td>
                 <label id="lbl_transferencia_existencias"/>
             </td>
             <td>
                 <label id="lbl_transferencia_cantidad"/>
             </td>
             <td>
                 <label id="lbl_transferencia_costoUni"/>
             </td>
             <td>
                 <label id="lbl_transferencia_total">
             </td>
        </tr>
    </tbody>
</table>
<a id="btn_transferencia_nuevo" class="btn btn-default pull-left">Agregar</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

我的 js

var i = 0

$('#txt_transferencia_codigo' +  i).blur(function () {
  if ($('#txt_transferencia_codigo' + i).val() !== '')
    console.log($('#txt_transferencia_codigo' + i).val())
})

$('#btn_transferencia_nuevo').click(function () {
  i = i + 1
  console.log(i)
  $('#tabla_transferencia').prepend('<tr id=\'row' + i + '\'><td><input type=\'text\' id=\'txt_transferencia_codigo' + i + '\'></td></tr>')
})

Answer 1

正如我在评论中提到的，每次生成新行后都必须附加事件处理程序。

var i = 0

$('#txt_transferencia_codigo' +  i).blur(function () {
  if ($('#txt_transferencia_codigo' + i).val() !== '')
    console.log($('#txt_transferencia_codigo' + i).val())
})

$('#btn_transferencia_nuevo').click(function () {
  i = i + 1
  console.log(i)
  $('#tabla_transferencia').prepend('<tr id=\'row' + i + '\'><td><input type=\'text\' id=\'txt_transferencia_codigo' + i + '\'></td></tr>')
  var inputElement = $('#txt_transferencia_codigo' + i)
  attachBlurEvent(inputElement, i)
})

function attachBlurEvent(inputElement, i){
  $(inputElement).blur(function () {
  if (inputElement.val() !== '')
    console.log(inputElement.val())
})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered" id="tabla_transferencia">
    <thead>
         <tr>
             <th style="width: 80px">Codigo</th>
             <th style="width: 500px">Descripción</th>
             <th>Existencias</th>
             <th>Cantidad</th>
             <th>Costo/Unit</th>
             <th style="width: 40px">Total</th>
             <th></th>
         </tr>
     </thead>
     <tbody>
         <tr id='row0'>
             <td>
                 <input type="text" id="txt_transferencia_codigo0" placeholder="Ingese el código"/>
             </td>
             <td>
                 <label id="lbl_transferencia_descripcion"/>
             </td>
             <td>
                 <label id="lbl_transferencia_existencias"/>
             </td>
             <td>
                 <label id="lbl_transferencia_cantidad"/>
             </td>
             <td>
                 <label id="lbl_transferencia_costoUni"/>
             </td>
             <td>
                 <label id="lbl_transferencia_total">
             </td>
        </tr>
    </tbody>
</table>
<a id="btn_transferencia_nuevo" class="btn btn-default pull-left">Agregar</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>