How to make an editable cell of an HTML table?

Question

I would like to make some cells of the html table editable, just double-click on the cell, enter the text, and the changes can be sent to the server. I do not want to use some tools, such as a dojo data grid. Because it provides some other features. Could you provide me a piece of code or tips on how to implement it?

Answer 1

You can use the contenteditable attribute for cells, rows, or tables.

Updated for compatibility with IE8

<table> <tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr> <tr><td>I'm not editable</td></tr> </table> 

Just note that if you make the table editable, at least in Mozilla, you can delete rows, etc.

You also need to check if the browser supports this attribute for your target audience.

As for listening to changes (so you can send them to the server), see the content change events

Answer 2

HTML5 supports contenteditable,

 <table border="3"> <thead> <tr>Heading 1</tr> <tr>Heading 2</tr> </thead> <tbody> <tr> <td contenteditable='true'></td> <td contenteditable='true'></td> </tr> <tr> <td contenteditable='true'></td> <td contenteditable='true'></td> </tr> </tbody> </table> 

3rd party editing

Quote mdn post on contenteditable

The attribute must take one of the following values:

• true or an empty string that indicates that the item should be editable;

• false, which indicates that the item should not be editable.

If this attribute is not set, its default value is inherited from its parent.

This attribute is enumerated, not logical. This means that explicitly using one of the true, false, or empty string values ​​is mandatory and that the abbreviation ... is not allowed.

 // wrong not allowed <label contenteditable>Example Label</label> // correct usage <label contenteditable="true">Example Label</label>. 

Answer 3

I have three approaches, here you can use both <input> or <textarea> according to your requirements.

1. Use Enter in <td> .

Using the <input> element in all <td> s,

 <tr><td><input type="text"></td>....</tr> 

In addition, you can resize the input to the size of its td . e.g.

 input { width:100%; height:100%; } 

You can optionally change the color of the input box border when it is not being edited.

2. Use the attribute contenteditable='true' . (HTML5)

However, if you want to use contenteditable='true' , you can also save the corresponding values ​​in the database. You can achieve this with AJAX.

You can attach keyhandlers keyup , keydown , keypress , etc. before <td> . In addition, it is useful to use some delay () for those events when the user is continuously typing, the ajax event will not fire every time the user presses a key. eg,

 $('table td').keyup(function() { clearTimeout($.data(this, 'timer')); var wait = setTimeout(saveData, 500); // delay after user types $(this).data('timer', wait); }); function saveData() { // ... ajax ... } 

3. Add <input> to <td> when clicked.

Add an input element to td when you press <td> , replace its value with the value of td . When the input is blurry, change the value of 'td to the input value. All this with JavaScript.

Answer 4

Try this code.

 $(function () { $("td").dblclick(function () { var OriginalContent = $(this).text(); $(this).addClass("cellEditing"); $(this).html("<input type="text" value="&quot; + OriginalContent + &quot;" />"); $(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"); }); }); }); 

You can also visit this link for more details:

• jQuery and editable HTML table

Answer 5

You can use x-editable https://vitalets.imtqy.com/x-editable/ its amazing bootstrap library

Answer 6

If you use jQuery, this plugin will help you simple but good.

https://github.com/samuelsantosdev/TableEdit

Answer 7

This is the only and workable example.

  <html> <head> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source --> </head> <body> <table align="center"> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>001</td> <td>dog</td> </tr> <tr> <td>002</td> <td>cat</td> </tr> <tr> <td>003</td> <td>pig</td> </tr> </table> <script> $(function(){ $("td").click(function(event){ if($(this).children("input").length > 0) return false; var tdObj = $(this); var preText = tdObj.html(); var inputObj = $("<input type='text' />"); tdObj.html(""); inputObj.width(tdObj.width()) .height(tdObj.height()) .css({border:"0px",fontSize:"17px"}) .val(preText) .appendTo(tdObj) .trigger("focus") .trigger("select"); inputObj.keyup(function(event){ if(13 == event.which) { // press ENTER-key var text = $(this).val(); tdObj.html(text); } else if(27 == event.which) { // press ESC-key tdObj.html(preText); } }); inputObj.click(function(){ return false; }); }); }); </script> </body> </html> 

Answer 8

Just insert the <input> element into the <td> dynamically by clicking on the cell. Only plain HTML and Javascript. No need for contentEditable , jquery , HTML5

https://Jsfiddle.net/gsivanov/38tLqobw/2/

Answer 9

it's actually so straightforward, this is my HTML, jQuery sample .. and it works like a charm, I build all the code using the json data sample online. greetings

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

Answer 10

This is an important point, although you do not need to make the code so dirty. Instead, you can simply iterate over all the <td> and add a <input> with attributes and finally enter the values.

 function edit(el) { el.childNodes[0].removeAttribute("disabled"); el.childNodes[0].focus(); window.getSelection().removeAllRanges(); } function disable(el) { el.setAttribute("disabled",""); } 

 <table border> <tr> <td ondblclick="edit(this)"><input value="cell1" disabled onblur="disable(this)"></td> <td ondblclick="edit(this)"><input value="cell2" disabled onblur="disable(this)"></td> <td ondblclick="edit(this)"><input value="cell3" disabled onblur="disable(this)"></td> <td ondblclick="edit(this)"><input value="so forth..." disabled onblur="disable(this)"> </td> </tr> </table>