Skip to main content

El problema pasa porque cuando añades los escuchadores para las celdas estos se aplican solo a las celdas que existen en ese momento en el DOM. Cuando tu agregas nuevas filas, agregas esas filas bajo demanda, por ende, estas filas no tienen ningún listener asociado porque recién han sido creadas y agregadas al DOM.

Haz uso de event delegation para que de esta manera, el listener sea escuchado en la tabla y se delege a las celdas.

Ejemplo

$(document).ready(function() {
  $('#bt_add').click(function() {
    var check = [];
    $("#tabla").find('.selected').find('td').each(function() {
      if ($.trim($(this).text()) === "")
        check.push($(this).attr('id'));
    });
    if (check.length === 0)
      agregar();
    else
      alert('Registre los Datos de la Fila ');
  });

  $('#bt_del').click(function() {
    eliminar();
  });

  $('#bt_delall').click(function() {
    eliminarTodasFilas();

  });


});
var cont = 0;
var id_fila_selected = [];

function agregar() {
  cont++;
  var fila =

    '<tr class="selected" id="fila' + cont + 'onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

    '<td><input type="text" id="nombre"  placeholder="Ingresar nombre"></td>' +

    '<td><input type="text" id="area"  placeholder="Ingresar area"></td>' +

    '<td><input type="text" id="puesto"  placeholder="Ingresar puesto"></td>' +

    '<td><input type="text" id="email"  placeholder="Ingresar email" onkeyup="addToTable(event)"></td></tr>';


  $('#tabla').append(fila);
  reordenar();
}

function addToTable(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    const row = e.target.parentNode.parentNode;
    const inputs = row.querySelectorAll('input');
    const values = [].map.call(inputs, input => input.value);
    const tds = row.querySelectorAll('td');
    [].forEach.call(tds, (td, i) => {
      if (i === 0) {
        td.textContent = i + 1;
      } else {
        td.innerHTML = values[i - 1];
      }
    });
    reordenar();
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');

    var existe_el_id = id_fila_selected.indexOf(id_fila);
    id_fila_selected.splice(existe_el_id, 1);
  } else {
    $('#' + id_fila).addClass('seleccionada');

    id_fila_selected.push(id_fila);
  }

}

function eliminar() {

  for (var i = 0; i < id_fila_selected.length; i++) {
    $('#' + id_fila_selected[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tr.selected').each(function() {
    $(this).remove();
  });
}

$(function() {
  $("table").on("dblclick", "td", function() {
    var OriginalContent = $(this).text();
    $(this).addClass("cellEditing");
    $(this).html("<input type='text' value='" + OriginalContent + "' />");
    $(this).children().first().focus();
    $(this).children().first().keypress(function(e) {
      if (e.which == 13) {
        var newContent = $(this).val();
        $(this).parent().text(newContent);
        $(this).parent().removeClass("cellEditing");
      }
    });
    $(this).children().first().blur(function() {
      $(this).parent().text(OriginalContent);
      $(this).parent().removeClass("cellEditing");
    });
  });
});
#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="content">
    <h1> Tabla de Ejemplo </h1>
    <br>
    <div align="center" style="width:416px;">
      <button id="bt_add" class="btn btn-primary">Agregar</button>
      <button id="bt_del" class="btn btn-primary">Eliminar</button>
      <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
    </div>
    <table id="tabla" style="position:absolute;top:150px;left:75px" class="table table-bordered">

      <thead style="background-color:powderblue;">


        <tr>
          <th>Nº</th>
          <th>NOMBRE</th>
          <th>AREA</th>
          <th>PUESTO</th>
          <th>EMAIL</th>

        </tr>

               </thead>
    </table>
  </div>


</body>

gugadev
  • 19.1k
  • 1
  • 27
  • 49