DobleClick to Edit

Question

DobleClick to Edit

Navigation

#1 by (3 votes)

2

I'm doing an HTML table which has the fields of: No., Name, Area, Position and Email, the only thing I need is to edit the rows that were already entered in the table, to edit them I want to doubleclick in the row , but the problem is that I edit the headers and not the rows. I show them my code and please help me, I'm desperate:

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

javascript jquery html

asked by Reinos Ric 19.07.2017 в 19:11

source

1 answer

I can not access an item with an ID that contains% with JQuery Type that has the name of the class

score 3 · Answer 1

You can use the .dblclick() event to get a double 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

Another example:

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