Contenteditable - Jquery Save Content Just To Webpage (as Well As Adding And Removing)

Upon thorough research I was able to allow one data value to be edited and updated within my table. However, when I attempt to alter where the contenteditable can be edited, It rem

Solution 1:

Rather than making td editable you could wrap div inside td and make it editable and assign fixed width and height to 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*/
 }

Now there are 2 options either allow overflow to be hidden or scroll. You could examine the behavior and select either one. As a user friendly experience you could assign tooltip to div on hover or click so that whenever values inside div are being overflown user could see what are the current values inside.

 $(".clEdit").hover(function(e) {

   $(this).prop("title", $(this).html());

 });

Yes you could add/delete rows from table without DB if you know the values. id can be calculated from previous id value.

Adding/removing from table does not guarantee DB will be updated you need handle that.

On adding rows you need to bind event for contenteditable as well.

 $("#add").click(function() {
    //LOGIC TO ADD ROW TO TABLEvar trRow = "<tr><td>" + ++idFirstCol + "</td><td>" + "SecondColValue" + "</td><td><div class='clEdit'>" + "ThirdColValue" + "</div></td>     <td> " + "LastColValue" + " </td></tr>";

$("#ConTable").append(trRow);
   $(".clEdit").hover(function(e) {
        $(this).prop("title", $(this).html());
   });
   $(".clEdit").prop('contenteditable', true);
});

You could refer to JSFiddle here. http://jsfiddle.net/8mt6d7bz/

Lmk if that answers your question