从表内的输入中获取数据

Question

嗨，伙计们，我正在尝试在我的表中获取输入的值，问题是我正在通过按钮动态创建新行，这些行获取新的 id 和所有内容。

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

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

我的桌子

<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>