2

Estoy haciendo una tabla HTML lo cual tiene los campos de: Nº, Nombre, Área, Puesto y Email, lo único que me falta es editar las filas que ya fueron ingresados en la tabla, para editarlas quiero hacer dobleclick en la fila, pero el problema es que me edita las cabeceras y no las filas.Les muestro mi código y por favor ayúdenme, estoy desesperado:

  $(document).ready(function() {
  $('#bt_add').click(function() {
    agregar();
  });
  $('#bt_del').click(function() {
    eliminar();//eliminar(id_fila_selected); podemos omitir el parámetro pues abajo lo declaras como variable global
  });

  $('#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"></td>' +

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

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

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


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

/*
 * Esta función agrega lo ingresado a la tabla
 */
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]; }
    });
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
    // borrar también el id del array de filas seleccionadas
    var existe_el_id = id_fila_selected.indexOf(id_fila); 
    id_fila_selected.splice(existe_el_id, 1);
  } else {
    $('#' + id_fila).addClass('seleccionada');
    // agregar id sólo si se hizo click
    id_fila_selected.push(id_fila); 
  }
  //2702id_fila_selected=id_fila;
}

function eliminar() {
  /*$('#'+id_fila).remove();
  reordenar();*/
  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").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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="content">
  <label> Tabla de Ejemplo </label>
  <br>
  <button id="bt_add" class="btn btn-default">Agregar</button>
  <button id="bt_del" class="btn btn-default">Eliminar</button>
  <button id="bt_delall" class="btn btn-default">Eliminar todo</button>

  <table id="tabla" class="table table-bordered">
    <thead>
      <tr>
        <td>Nº</td>
        <td>NOMBRE</td>
        <td>AREA</td>
        <td>PUESTO</td>
        <td>EMAIL</td>
      </tr>
    </thead>
  </table>
</div>

9
  • Es decir que tienes tu tabla y cuando le dees doble click en cualquier campo de la tabla te abra y puedas editar ese campo? Commented el 19 jul. 2017 a las 19:46
  • @IvanMoreFlores Es correcto, es lo que quiero que haga, Mi tabla crea una fila, en ella le ingreso los datos (Nº, Nombre, Área, Puesto y Email) y los inserta en la tabla, pero solo me falta editarlo.
    – Reinos Ric
    Commented el 19 jul. 2017 a las 20:55
  • E puesto una respuesta fijate Commented el 19 jul. 2017 a las 20:58
  • ????????????????? no entiendo? Commented el 19 jul. 2017 a las 21:04
  • eso no se copia .-. Commented el 19 jul. 2017 a las 21:07

1 respuesta 1

3

Puedes usar el evento .dblclick() para conseguir el doble click:

$('button').dblclick(function() {

    editar();
});

function editar(){

  console.log('Uhhhhhhh');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toca me dos veces seguido</button>

EDIT

Otro ejemplo:

// Al hacer doble click al input se puede editar
$(document).on('dblclick', 'input', function() {

   $(this).prop('readonly', false);
});

// Añadimos las filas que quieras cuales son por defecto 'readonly'
$('button').click(function() {

    $('tr').append('<td><input size="30" type="text" value="Una fila más" readonly></td>');        
});
td { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
      <input size="30" type="text" value="Edita me después de dobleclick" readonly>
      </td>
    </tr>
  </tbody>
<table>
<br>
<button>Insertar nueva fila</button>

7
  • Pero no quiero un botón, yo quiero editarlo pero cuando le de un doble click a la fila ya insertada y asi lo edite ¿Podrías darme un ejemplo basándote en mi código de Javascript? por favor...
    – Reinos Ric
    Commented el 19 jul. 2017 a las 17:26
  • @ReinosRic - Haz que tu fila ser clickable... te daré un ejemplo básico... Commented el 19 jul. 2017 a las 17:28
  • Si por favor, si me pudiera pasar el ejemplo @aldanux
    – Reinos Ric
    Commented el 19 jul. 2017 a las 17:49
  • 1
    @ReinosRic - Espero que sea ahora más claro y lo puedas implementar en tu código Commented el 19 jul. 2017 a las 18:30
  • A cabo de usar su código que me dio de ejemplo @aldanux y no me funciono, pero de todos modos muchas gracias
    – Reinos Ric
    Commented el 19 jul. 2017 a las 19:31

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.