Uso de jQuery para editar celdas de tabla individuales

Question

¿Cómo puedo usar jQuery para hacer clic en una celda de tabla y editar su contenido? Hay una columna en particular que contiene varios párrafos de datos, de ser posible, tenga una ventana emergente con un área de texto grande (o idealmente un editor de HTML).

Los cambios solo deben ser superficiales ya que estoy usando otro complemento de jQuery para raspar los contenidos de la tabla y exportarlos a otra cosa.

Dificultad, ninguna de las celdas puede tener nombres únicos o id.

Answer 1

Es posible que desee comprobar el jqGrid plugin.

Answer 2

$("td").click(function(event){ 
    var myText = ''; 
    $("myOverlayThing").show(); 
    $("myOverlayThingCloseLink").click(function(event){ 
     event.preventDefault(); 
     myText = $("myOverlayThing.textarea").val(); 
    }); 
    $(this).html(myText); 
}); 

Probablemente sea un poco más complicado que eso, pero esa es la idea básica sin ver su HTML.

Answer 3

jEditable plugin puede ayudarle a editar su tabla en su lugar.

$(document).ready(function() { 
    $('td').editable('http://www.example.com/save.php'); 
}); 

Answer 4

Hacer editable el contenido se puede lograr con plugins como el jQuery Editable uno. Sin embargo, no creo que esto sea tan fácil de traducir a una tabla sin identificadores.

Atravesar la mesa (y yo estoy asumiendo su mesa o bien tiene un diámetro interior de sí mismo o es la única tabla de la página) sería bastante recta hacia adelante si fueron capaces de conseguir que el trabajo plugin:

$('#myTable td').editable(); 

Pero eso no le da el editor de texto enriquecido que está buscando. El otro enfoque sería olvidar ese complemento e intentar usar el diálogo de jQuery UI.

$('#myTable td').click(function(){ 
    $('myDialog').dialog('open'); 
}); 

Suponiendo que usted pone un editor de texto enriquecido en ese diálogo, se puede usar $ .ajax() para enviar el resultado a algún servicio en el lado del servidor.

Finalmente, el jqGrid podría ser una buena opción para usted, dependiendo de los datos que desee en su tabla.

Answer 5

código de Inkedmn no funcional como es, pero es la forma más sencilla de hacerlo como una idea: a fin de comprobar el siguiente código de trabajo sobre la base de su lógica:

$(function() { 
    $('#overlay').hide(); 
    $('td').click(function(event) { 
     var myText = ''; 
     $('#overlay').show(); 
     var o = $(this); 
     $('#closeLink').click(function(event) { 
      event.preventDefault(); 
      myText = $('#overlay textarea').val(); 
      $(o).html(myText); 
      $(this).parent().hide(500); 
     });     
    }); 
}); 

Answer 6

utilizo Data tables (a jQuery plugin) ya que esto hace todo mucho más simple.

También dicen que utilicen el complemento jEditable con su complemento. Permite que las filas sean editables: Link: Editable Table (incluye código de muestra)

Answer 7

El plugin JQuery Datatables Editable parece ser mejor que el plugin Editable Table oficial, porque el primero admite la edición en línea y es de código abierto.

Answer 8

Pruebe esta solución sencilla:

$(function() { 
    $("td").dblclick(function() { 
     var OriginalContent = $(this).text(); 

     var inputNewText = prompt("Enter new content for:", OriginalContent); 

     if (inputNewText != null) { 
      $(this).text(inputNewText) 
     } 
    }); 
}); 

Answer 9

En vista de que esta página es a la vez de 3 años y el primer resultado de una búsqueda en Google, pensé que era debido una respuesta más actual. Dado el peso y la complejidad de las opciones de plugin anteriores, pensé que una solución más sencilla, sencilla y directa también podría ser apreciada por quienes buscan alternativas.

Esto sustituye a la celda de la tabla con una entrada de texto y llamadas de eventos personalizados para que pueda manejar cualquier caso de uso que desee en guardar, cerrar, desenfoque, etc ...

En este caso, la única manera de cambiar el la información en la celda es presionar enter, pero puede personalizarla si lo desea, ej. es posible que desee guardar en desenfoque.

En este ejemplo, también puede presionar la tecla Esc para detener la edición y volver a poner la celda como estaba. Puede personalizar eso si lo desea.

Este ejemplo funciona con un solo clic, pero algunas personas prefieren hacer doble clic, a su elección.

$.fn.makeEditable = function() { 
    $(this).on('click',function(){ 
    if($(this).find('input').is(':focus')) return this; 
    var cell = $(this); 
    var content = $(this).html(); 
    $(this).html('<input type="text" value="' + $(this).html() + '" />') 
     .find('input') 
     .trigger('focus') 
     .on({ 
     'blur': function(){ 
      $(this).trigger('closeEditable'); 
     }, 
     'keyup':function(e){ 
      if(e.which == '13'){ // enter 
      $(this).trigger('saveEditable'); 
      } else if(e.which == '27'){ // escape 
      $(this).trigger('closeEditable'); 
      } 
     }, 
     'closeEditable':function(){ 
      cell.html(content); 
     }, 
     'saveEditable':function(){ 
      content = $(this).val(); 
      $(this).trigger('closeEditable'); 
     } 
    }); 
    }); 
return this; 
} 

Puede aplicar selectivamente las células editables uniéndolos como tal, o lo que tiene sentido para su caso.

$('.editable').makeEditable(); 

Answer 10

esto es en realidad tan sencillo, esta es mi HTML, muestra de jQuery .. y funciona como un encanto, voy a construir todo el código utilizando una muestra de datos JSON en línea. aplausos

< < HTML >>

<table id="myTable"></table> 

< < jQuery >>

<script> 
     var url = 'http://jsonplaceholder.typicode.com/posts'; 
     var currentEditedIndex = -1; 
     $(document).ready(function() { 
      $.getJSON(url, function (json) { 
       var tr; 
       tr = $('<tr/>'); 
       tr.append("<td>ID</td>"); 
       tr.append("<td>userId</td>"); 
       tr.append("<td>title</td>"); 
       tr.append("<td>body</td>"); 
       tr.append("<td>edit</td>"); 
       $('#myTable').append(tr); 

       for (var i = 0; i < json.length; i++) { 
        tr = $('<tr/>'); 
        tr.append("<td>" + json[i].id + "</td>"); 
        tr.append("<td>" + json[i].userId + "</td>"); 
        tr.append("<td>" + json[i].title + "</td>"); 
        tr.append("<td>" + json[i].body + "</td>"); 
        tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>"); 
        $('#myTable').append(tr); 
       } 
      }); 


     }); 


     function myfunc(rowindex) { 

      rowindex++; 
      console.log(currentEditedIndex) 
      if (currentEditedIndex != -1) { //not first time to click 
       cancelClick(rowindex) 
      } 
      else { 
       cancelClick(currentEditedIndex) 
      } 

      currentEditedIndex = rowindex; //update the global variable to current edit location 

      //get cells values 
      var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text()); 
      var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text()); 
      var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text()); 
      var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text()); 

      //remove text from previous click 


      //add a cancel button 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel' />"); 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200"); 

      //make it a text box 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />"); 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />"); 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />"); 
      $("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />"); 

     } 

     //on cancel, remove the controls and remove the cancel btn 
     function cancelClick(indx) 
     { 

      //console.log('edit is at row>> rowindex:' + currentEditedIndex); 
      indx = currentEditedIndex; 

      var cell1 = ($("#myTable #mycustomid").val()); 
      var cell2 = ($("#myTable #mycustomuserId").val()); 
      var cell3 = ($("#myTable #mycustomtitle").val()); 
      var cell4 = ($("#myTable #mycustomedit").val()); 

      $("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1); 
      $("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2); 
      $("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3); 
      $("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4); 
      $("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove(); 
     } 



    </script>