contenteditable: JQuery guarda el contenido solo en la página web (además de agregar y eliminar)

Tras una investigación exhaustiva, pude permitir que se editara y actualizara un valor de datos dentro de mi tabla. Sin embargo, cuando bash modificar el contenido editable, se puede editar, elimina mi formato de la tabla (en realidad elimina el formato de la tabla por completo, lo que hace que mi idea no tenga sentido).

Aquí está mi código actual.

# IRC Name Ingame Name Position
1 [Cr|m|nAl] Herbalist Aeterna Top
2 bandido Bananni Aeterna Top
3 Funkystyle Funkystyle Aeterna Top
var theContent = $('#content2');// set the content $('#save').on('click', function () { // store the new content in localStorage when the button is clicked var editedContent = theContent.html(); localStorage.newContent = editedContent; }); if (localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage theContent.html(localStorage.getItem('newContent')); }

Ahora, idealmente, me gustaría que salga como esta captura de pantalla a continuación; http://sofes.miximages.com/javascript/R4TYhRB.png Con la columna de “Ingame Name” editable. Agregar fila / Eliminar fila, también deseo implementarlo, pero no estoy muy seguro de poder hacerlo con una tabla HTML tan simple.

Mi primera pregunta: ¿cómo puedo hacer que una fila en particular (es decir, el nombre del juego) sea la única editable? Soy terrible tener Javascript / Jquery y mi investigación desafortunadamente, solo me permite refinar una fila. (Sé que probablemente podría replicar el javascript / jquery, pero seguramente hay una forma más fácil?)

Segunda pregunta-

¿Es posible agregar la capacidad de una tabla HTML para agregar / eliminar filas sin tener una base de datos de algún tipo?

Gracias por cualquier orientación con respecto a esto.

En lugar de hacer td editable, podría ajustar div dentro de td y hacerlo editable y asignar width y height fijos a div.

  .clEdit { width: 200px; /*Try chaging it as per need*/ overflow: hidden; /* try scroll with more height */ height: 15px; /*Try chaging it as per need*/ } 

Ahora hay 2 opciones que permiten ocultar el desbordamiento o desplazarse. Podrías examinar el comportamiento y seleccionar cualquiera de los dos. Como una experiencia amigable para el usuario, puede asignar información sobre herramientas a div al desplazarse o hacer clic para que cada vez que los valores dentro de la div estén sobrepasados, el usuario pueda ver cuáles son los valores actuales en el interior.

  $(".clEdit").hover(function(e) { $(this).prop("title", $(this).html()); }); 

Sí, podría agregar / eliminar filas de la tabla sin DB si conoce los valores. id se puede calcular a partir del valor de ID anterior.

Agregar / eliminar de la tabla no garantiza que la base de datos se actualizará, debe manejarlo.

Al agregar filas, también es necesario vincular el evento para que se pueda editar.

  $("#add").click(function() { //LOGIC TO ADD ROW TO TABLE var trRow = "" + ++idFirstCol + "" + "SecondColValue" + "
" + "ThirdColValue" + "
" + "LastColValue" + " "; $("#ConTable").append(trRow); $(".clEdit").hover(function(e) { $(this).prop("title", $(this).html()); }); $(".clEdit").prop('contenteditable', true); });

Podrías referirte a JSFiddle aquí. http://jsfiddle.net/8mt6d7bz/

Lmk si eso responde a tu pregunta