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

102

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

html  editor  html-table  cell 
— feng峰
source

Answers:

116

您可以在相关单元格，行或表上使用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中，您可以删除行等。

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

至于侦听更改（以便您可以将其发送到服务器），请参阅内容可编辑的更改事件

— 布雷特·扎米尔（Brett Zamir）
source
谢谢。HTML5似乎支持contenteditable。我也在寻找在html4中也可以使用的解决方案。
— wqfeng 2011年
尽管最终在标准HTML5中将其编入了代码，但大多数较旧的浏览器已经很好地支持了它（除了FF3中仅部分支持）：caniuse.com/contenteditable（尽管不在移动设备中）
— Brett
大提示。我一直在寻找。谢谢。
— praneybehl
感谢您的宝贵建议。
— 2013年
1
如果需要IE8兼容性，则只需contenteditable在创建new时添加div <td>。否则，如文章中所述，您可以contenteditable在单元格，行或表上添加。
— Brett Zamir 2015年
61

HTML5支持可编辑的内容，

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

第三方

在contenteditable上引用mdn条目

该属性必须采用以下值之一：

  • true或空字符串，表示该元素必须可编辑；

  • false，表示该元素必须不可编辑。

如果未设置此属性，则其默认值将从其父元素继承。

此属性是枚举属性，而不是布尔值。这意味着必须强制使用值true，false或空字符串之一，并且不允许使用速记...。

// wrong not allowed
<label contenteditable>Example Label</label> 

// correct usage
<label contenteditable="true">Example Label</label>.
— 瓦尔丹
source
奇怪的。通常，属性值不是true，无论名称是什么。例如，<td contenteditable='contenteditable'></td>。
— trysis
1
contenteditable的可能状态： contenteditable ** =“”或** contenteditable ** =“ true”表示该元素是可编辑的。** contenteditable ** =“ false”表示该元素不可编辑。** contenteditable ** =“ inherit”表示如果元素的直接父元素是可编辑的，则该元素是可编辑的。这是默认值。当您将** contenteditable添加到元素时，浏览器将使该元素可编辑。此外，该元素的任何子元素也将变为可编辑状态，除非子元素明确为** contenteditable ** =“ false”。
— vardhan 2014年
1
我知道，我只是认为这很奇怪，因为其他大多数属性都没有这种语法。
— trysis
17

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

1.在中使用输入<td>。

<input>在all中使用element <td>，

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

另外，您可能需要将输入大小调整为的大小td。例如

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

当您不编辑输入框时，还可以更改其边框的颜色。

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

但是，如果要使用contenteditable='true'，则可能还需要将适当的值保存到数据库。您可以使用ajax实现此目的。

您可以将keyhandlers keyup，keydown，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。

— 巴夫什·甘加尼
source
不幸的是，您错过了问题部分“如何使HTML表格单元格可编辑？” 特别是在示例2中。用户询问如何在doubleclick上实现此目标。您能否实现缺少的部分？
— 罗伯特·罗伯特（Robert
@BhaveshGangani我有一些问题，contenteditable=true您能帮我吗？
1
当然可以。你有一个js小提琴吗？
— Bhavesh Gangani
6

这是一个可运行的示例。

$(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;
    });
  });
});
<html>
    <head>
        <!-- jQuery source -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </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>
    </body>
</html>
展开摘要

— ACE亚瑟
source
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");
 });
 });
});

您也可以访问此链接以获取更多详细信息：

— 用户名
source
为了避免IE中的$（this）.children（）。first（）。focus（）;问题；- stackoverflow.com/a/3562193/5234417
— 阿列克谢Zababurin
4

我正在将此用于可编辑字段

<table class="table table-bordered table-responsive-md table-striped text-center">
  <thead>
    <tr>
      <th class="text-center">Citation</th>
      <th class="text-center">Security</th>
      <th class="text-center">Implementation</th>
      <th class="text-center">Description</th>
      <th class="text-center">Solution</th>
      <th class="text-center">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
      <td class="pt-3-half" contenteditable="false">30</td>
      <td class="pt-3-half" contenteditable="false">Deepends</td>
      <td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
      <td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
      <td>
        <span class="table-remove"><button type="button"
                              class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
      </td>
    </tr>
  </tbody>
</table>
展开摘要

— 巴尔蒂·帕尔马
source
3

这是关键点，尽管您无需使代码如此混乱。取而代之的是，您可以遍历所有，<td>然后将与添加<input>到属性中，最后放入值中。

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>
展开摘要

— mathmaniac88
source
0

这实际上是非常简单的，这是我的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>
— 马哈茂德·赛义德（Mahmoud Sayed）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.