1

Buenos días. Estoy haciendo una tabla en donde se agregan filas y estas se pueda editar. Tenía un problema anterior el cual consistía en que solo editaba el encabezado, ya arregle ese problema pero se generó otro: solo me edita la primera fila pero la segunda fila y posteriores no las edita. No se por qué ocurre este problema; les muestro mi programa para que me puedan entender mejor:

$(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 () {        
		  $("td").on("dblclick",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>
	    
	   <tr 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>
	   
	    	</thead>
	        </table>
	        </div>


</body>

1
  • 1
    @GustavoGarcia me funciono, le agradezco por su atención y por resolver mi problema, ya le di palomita a su respuesta y un punto. Muchas Gracias.
    – Reinos Ric
    Commented el 20 jul. 2017 a las 16:33

1 respuesta 1

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.