javascript - Get data from an input inside a table


Keywords:javascript 


Question: 

Hi guys I'm trying to get the value of an input in my table, the problem is that I'm creating new rows dynamically by a button, these get the new ids and everything.

I'm getting the value by an blur event , but this one only gets the value when the main input loses the focus, but gets the data of the second input (if I've created a new one)

I want to get the data when the right input loses the focus

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

My 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>')
})

1 Answer: 

As i mentioned in the comment, you must attach event handler each time after generating a new row.

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=""></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>