如何使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 keyup ， keydown ，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，这个插件帮助你很简单，但是很好
试试这个代码。
$(function () { $("td").dblclick(function () { var OriginalContent = $(this).text(); $(this).addClass("cellEditing"); $(this).html("<input type="text" value="" + OriginalContent + "" />"); $(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>
你可以使用x-editable https://vitalets.github.io/x-editable/它的真棒库从bootstrap
只需在<td>dynamic地插入<input>元素，然后单击单元格。 只有简单的HTML和Javascript。 不需要contentEditable ， jquery ， HTML5
这实际上是非常直接的，这是我的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>
