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

Question

我想制作一些html表格可编辑的单元格，只需双击一个单元格，输入一些文本，然后可以将更改发送到服务器。我不想使用像dojo数据网格这样的工具包。因为它提供了一些其他功能。你会提供一些关于如何实现它的代码片段或建议吗？

Answer 1

您可以在有问题的单元格，行或表上使用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> 

只是注意，如果你做的表格编辑，在Mozilla至少，你可以删除行等

你想也需要检查无论您的目标受众的浏览器是否支持此属性。

至于监听的变化（这样你就可以发送到服务器），看contenteditable change events

Answer 2

如果你使用jQuery，这个插件可以帮助您 很简单，但好

https://github.com/samuelsantosdev/TableEdit

Answer 3

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> 

Answer 4

试试看看这个代码。

$(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 and Editable HTML table

Answer 5

我有三个方法， 在这里，您可以同时使用<input>或<textarea>按您的要求。

1.使用输入<td>。

使用在所有<td>小号<input>元素，

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

你也可能要输入调整到尺寸的它的TD。当然，

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

2.使用contenteditable='true'属性。 （HTML5）

但是，如果您想使用contenteditable='true'，您可能还想将适当的值保存到数据库。你可以用ajax实现这一点。

您可以将密码处理程序keyup,​​, keypress等附加到<td>。当用户连续输入时，使用一些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中添加输入元素，根据td的值替换它的值。当输入模糊时，用输入值更改td的值。所有这一切与JavaScript。

Answer 6

这实际上很直接， 这是我的HTML，jQuery示例..它的工作原理就像一个魅力，我使用在线json数据样本构建所有代码。 欢呼声

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

这是一个单一的和可运行的例子。

<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

您可以用x-编辑https://vitalets.github.io/x-editable/ 其真棒库从引导

Answer 9

只需插入在<td>动态<input>元素，对细胞点击。只有简单的HTML和Javascript。无需contentEditable，jquery，HTML5

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