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

Question

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

use*_*912 3 html javascript jquery html-table

基本上,我希望用户单击表格并编辑文本.

这是我跟随的Js小提琴:

http://jsfiddle.net/ddd3nick/ExA3j/22/

您可以在下面看到我放在一起的代码.我跟着一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rok*_*jan 5

首先包括jQuery库
比把你的脚本
你可能想看一下contenteditable Elements

这看起来很像这样:

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

});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年前
查看次数：	5927 次
最近记录：	8 年，10 月前