Javascript 将ContentEditable插入HTML表_Javascript_Jquery_Html

Javascript 将ContentEditable插入HTML表

javascript jquery html

Javascript 将ContentEditable插入HTML表,javascript,jquery,html,Javascript,Jquery,Html,我将表格的html存储在$scheduletext中。我希望能够在单击表的任何单元格时对其进行编辑，因此我使用JQuery执行单击操作。当我点击一个单元格时，它将变为空白，但不允许我在其中键入内容，我需要更改什么才能在其中键入内容 <html> <body> <div id="main"> <?php print_r($scheduletext);

我将表格的html存储在$scheduletext中。我希望能够在单击表的任何单元格时对其进行编辑，因此我使用JQuery执行单击操作。当我点击一个单元格时，它将变为空白，但不允许我在其中键入内容，我需要更改什么才能在其中键入内容

<html>
    <body>         
        <div id="main">
            <?php 
                print_r($scheduletext);
            ?> 
        </div>
        <script type="text/javascript">
            $('td').click(function(){
                $(this).html("<contenteditable>");
            });
        </script>
    </body>
</html>

出于编辑和测试的目的，因为要运行我的代码，您还需要该表，CSS也不会有任何影响。。。我把它倒进了JSFIDLE，希望能让任何想帮我的人都更容易：提前谢谢

编辑：由于某些原因，JSFIDLE在单击时根本不做任何事情，但在我的站点的live模型上，单击时单元格变为空白，但无法输入任何内容。

在calling.html中，您正在修改td元素的内部html，以包含无效的元素。您实际要做的是设置contenteditable属性：

$(this).prop('contenteditable', true);

contentEditable是一个属性

试试这个：

$(this).attr('contentEditable', true);

可编辑内容是一个属性，而不是元素。要将属性contenteditable添加到要具有可编辑内容的元素中

$('td').click(function(){
    $(this).attr("contenteditable");
});

请注意，这包括其他答案所包含的信息，这要归功于他们，但我要补充一点，并将其全部放在一个地方

我做了以下修改：

添加了tabindex，使表格单元格可设置为选项卡。单击时将焦点放在表格单元格上。在焦点上添加contenteditable属性。选择焦点上表格单元格的内容。当td失去焦点时，删除可编辑的内容。函数集选择元素{ //从中选择的代码http://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-clickanswer-3806004 setTimeoutfunction{ var-sel，范围；如果window.getSelection&&document.createRange{ 范围=document.createRange； range.selectNodeContentselement； sel=window.getSelection；选择移除所有范围；选择范围； }如果是document.body.createTextRange，则为else{ 范围=document.body.createTextRange； range.moveToElementTextelement； range.select； } }, 0 } //将tabindex添加到所有tds。 $'td'.attr'tabindex'，0； $'td'。关于“焦点”，函数{ $this.attr'contenteditable'，true；设置此选项； }.关于'blur'，函数{ $this.attr'contenteditable'，false； } 桌子 th，运输署{ 边框：1px纯黑；边界塌陷：塌陷；字体大小：90%； } th，运输署{ 填充：8px； } 运输署{ 文本对齐：居中； } 桌子{ 保证金：0自动； } 22盎司深 12克拉4盎司深 2016-01-01 9785 2478 2016-01-02 8754 2136 2016-01-03 13587 2203 2016-01-04 14111 3297 2016-01-05 13212 3101 2016-01-06 16335 3299 2016-01-07 15421 3100

您需要在JSFIDLE中包含jQuery。这可以通过点击JS框中右上角的JavaScript按钮来完成。

$('table').on('mousedown', 'td', function (event) {
  $(event.target).closest('td').prop("contentEditable", true);
});