如何使HTML表格单元格可编辑?

我想使一些HTML表格可编辑的单元格,只需双击一个单元格,input一些文本,并可以将更改发送到服务器。 我不想使用dojo数据网格等工具包。 因为它提供了一些其他function。 你会提供一些代码片段或build议如何实现它?

您可以在有问题的单元格,行或表上使用contenteditable属性。

更新了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> 

请注意,如果您使表格可编辑,至less在Mozilla中,您可以删除行等。

您还需要检查目标受众的浏览器是否支持此属性。

至于听更改(以便您可以发送到服务器),请参阅contenteditable更改事件

HTML5支持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> 

我有三种方法,在这里您可以根据您的要求使用<input><textarea>

1.在<td>使用input。

在所有的<td>使用<input>元素,

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

此外,您可能希望将input大小调整为td的大小。 当然,

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

2.使用contenteditable='true'属性。 (HTML5)

但是如果你想使用contenteditable='true'你可能也想把合适的值保存到数据库中。 你可以用ajax实现这个。

您可以将keyhandlers keyupkeydown ,keypress等附加到<td> 。 当用户连续input时,使用一些delay()也是很好的事情,ajax事件不会在每个关键用户按下时触发。 例如,

 $('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.单击时,将<input>追加到<td>

单击<td>时在td中添加input元素,根据td的值replace它的值。 当input模糊时,用input值改变td的值。 所有这一切与JavaScript。

如果你使用jquery,这个插件帮助你很简单,但是很好

https://github.com/samuelsantosdev/TableEdit

试试这个代码。

 $(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"); }); }); }); 

您也可以访问此链接了解更多详情:

  • jQuery和可编辑的HTML表

这是一个可运行的例子。

  <html> <head> <script src="jquery-3.1.1.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> 

只需在<td>dynamic地插入<input>元素,然后单击单元格。 只有简单的HTML和Javascript。 不需要contentEditablejqueryHTML5

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

这实际上是非常直接的,这是我的HTML,jQuery示例..它的作品就像一个魅力,我使用在线JSON数据样本构build所有的代码。 干杯

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