Question

基本上，我希望用户点击表格并编辑文本。

这是我跟随的Js小提琴：

下面你可以看到我放在一起的代码。我跟着一个JS小提琴，想到在我的页面中使用它。

当我双击单元格时没有任何反应，我不知道为什么不工作。

请帮助找到遗漏的内容！

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
<script type="text/javascript">

    $(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");
    });
        $(this).find('input').dblclick(function(e){
            e.stopPropagation(); 
        });
    });
});

</script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<table class="editableTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Shahid</td>
                <td>shahid@ssiddique.info</td>
                <td>012-234-2432</td>
            </tr>
        </tbody>
    </table>

<a href='http://ssiddique.info'> ssiddique </a>

</body>
</html>

Answer 1

首先包含jQuery库
比放你的剧本
您可能需要查看 contenteditable 元素

看起来非常像这样：

＆＃13;

$(function() {

  var $td = $("td");

  $td.on({
    "keypress" : function(e) {
      if (e.which !== 13) { // On Return key - "save" cell
        e.preventDefault();
        $(this).prop("contenteditable", false);
      }
    },
    "dblclick" : function() {
      $td.not(this).prop("contenteditable", false);
      $(this).prop("contenteditable", true);
    }
  });

});

＆＃13;

td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<p><b>Double-click</b> on a table cell to edit</p>r

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000</td>
      <td>Roko</td>
      <td>roko@example.com</td>
      <td>021-321-4321</td>
    </tr>
    <tr>
      <td>001</td>
      <td>Shahid</td>
      <td>shahid@example.com</td>
      <td>012-123-1234</td>
    </tr>
  </tbody>
</table>

＆＃13;

如何将HTML表格单元格转换为可编辑的文本框

1 个答案: