CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Brian Elliott
Brian Elliott

Reputation: 51

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 removes my formatting of the table (it actually removes the table format completely, rendering my idea pointless.

Here is my current code.

              <div class="bs-docs-example">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>IRC Name</th>
                  <th>Ingame Name</th>
                  <th>Position</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>[Cr|m|nAl]</td>
                  <td id="content2" contenteditable="true">Herbalist</td>
                  <td>Aeterna Top</td>
                </tr>
                <tr>
                  <td >2</td>
                  <td >bandido</td>
                  <td >Bananni</td>
                  <td >Aeterna Top</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Funkystyle</td>
                  <td>Funkystyle</td>
                  <td>Aeterna Top</td>
                </tr>
              </tbody>
            </table>
          </div>
    </div>
</div>
    <button id="save">Save Changes</button>

<!-- begin the script -->
<script src="js/jquery.js" type="text/javascript"></script>
<script>
    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'));
    }
</script>

Now, ideally I would like it to output like this screenshot below; https://i.sstatic.net/SOoeI.png With the column of "Ingame Name" editable. Add Row/Remove Row, I'm wanting to implement too, but I'm not too sure if you can do it with such a simple HTML table.

My First question- how would I make a particular row (i.e Ingame Name) be the only one editable? I'm terrible have Javascript/Jquery and my research unfortunately, only allows me to refine one row. (I know I could probably replicate the javascript/jquery, but surely there is an easier way?)

Second question-

Is it possible to actually add the ability for a HTML table to add/remove rows without having a database of some sort?

Thanks for any guidance in regards to this.

Upvotes: 1

Views: 431

Answers (1)

pratikpawar
pratikpawar

Reputation: 2098

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 TABLE

    var 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

Upvotes: 1

Related Questions