首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在html/css/jQuery中为表格可拖动行启用contentediaible

如何在html/css/jQuery中为表格可拖动行启用contentediaible
EN

Stack Overflow用户
提问于 2018-06-02 02:33:15
回答 1查看 91关注 0票数 0

我有一张表,它的列是可编辑的。当我使用this JSFiddle中的示例来使表格中的行可拖动时。

contenteditable属性不起作用。这是my JS Fiddle

如果您注释掉javascript,您可以看到列year是可编辑的,但是如果您想添加javascript以使行可拖动,那么year列是不可编辑的,尽管属性"contenteditible = 'true‘在页面源代码中。

下面是我的html以供参考:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
<tbody>
    <tr><td class="InputBox_RowClass">1</td><td><p contenteditable='true'>1969</p></td><td>Slaughterhouse-Five</td><td>A+</td></tr>
    <tr><td class="InputBox_RowClass">2</td><td><p contenteditable='true'>1952</p></td><td>Player Piano</td><td>B</td></tr>
    <tr><td class="InputBox_RowClass">3</td><td><p contenteditable='true'>1963</p></td><td>Cat's Cradle</td><td>A+</td></tr>
    <tr><td class="InputBox_RowClass">4</td><td><p contenteditable='true'>1973</p></td><td>Breakfast of Champions</td><td>C</td></tr>
    <tr><td class="InputBox_RowClass">5</td><td><p contenteditable='true'>1965</p></td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
</tbody>

jQuery:

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
};

$("#sort tbody").sortable({
    helper: fixHelperModified
}).disableSelection(); 
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-02 03:23:30

这里有两个问题:

  1. 在可编辑内容的项目上添加取消选项。
  2. 删除disableSelection(),因为它会使目标项目失去焦点。

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex,
    cancel: '[contenteditable]',
})//.disableSelection();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>

<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <tbody>
    <tr><td class="InputBox_RowClass">1</td><td><p contenteditable='true'>1969</p></td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td class="InputBox_RowClass">2</td><td><p contenteditable='true'>1952</p></td><td>Player Piano</td><td>B</td></tr>
        <tr><td class="InputBox_RowClass">3</td><td><p contenteditable='true'>1963</p></td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td class="InputBox_RowClass">4</td><td><p contenteditable='true'>1973</p></td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td class="InputBox_RowClass">5</td><td><p contenteditable='true'>1965</p></td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50649242

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档