jquery - 如何在 html/css/jQuery 中为表格的可拖动行启用 contentediaible
问题描述
我有一个可编辑列的表格。当我使用此 JSFiddle中的示例使表格行可拖动时。
contenteditable 属性不起作用。这是我的 JS 小提琴
如果你注释掉 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();
解决方案
这里有2个问题:
- 在 contenteditable 项目上添加取消选项。
- 删除 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>
推荐阅读
- go - 创建一个未声明属性的结构
- c# - 我怎样才能制作像0000-0000这样的电话号码格式
- elasticsearch - ElasticSearch starts with query for autocomplete feature
- ffmpeg - 快速剪辑长视频片段
- php - 如何处理具有 3 个段的 url 路由?
- php - 使用 Jquery 响应多个 Keypress
- java - 使用递归方法在java中返回一个中序字符串?
- javascript - 更新 Flash 内容 src 标签以换出动画
- css - React Fontawesome CSS 伪元素不在 div 内呈现,但在 Codepen 中工作
- python - 如何在python中加入或合并