我在拖放功能中实现某些功能时遇到问题。到目前为止,可拖动和可排序是可以的。现在问题是我试图突出显示所选行并使用按钮将其删除。
我有两个表:A类和类UI。我设法突出显示from operator import add
half_split = np.array_split(input, 2)
res = map(lambda x: np.array_split(x, 2, axis=1), half_split)
res = reduce(add, res)
表类A.但是在表类UI中我不能突出显示tr
。
这是我的jsfiddle。
我真的很感谢你的帮助。
答案 0 :(得分:2)
您的代码和CSS存在几个问题:
第一个问题 - 您的test2 CSS选择器仅设置为在具有A类的表下工作:
您的代码:
.A tbody tr.test2 td {
background: rgba(20, 111, 186, 0.38);
}
我的修复,是通用的:
tbody tr.test2 td {
background: rgba(20, 111, 186, 0.38);
}
下一期,您的点击从未在第二张桌子上调用过: 你的代码(仅在带有ID图的表下):
$('#diagram tbody tr').click(function(e) {
$('#diagram tbody tr').not(this).removeClass('test2');
$(this).toggleClass('test2');
});
我的代码(所有表的事件委托):
$('tbody').on("click","tr",function(e) {
$('tbody tr').not(this).removeClass('test2');
$(this).toggleClass('test2');
});
工作小提琴: http://jsfiddle.net/jwb7vy9L/9/
与删除工作小提琴:
$("#button1").on("click",function(e){
$("table:not(.A) .test2").remove();
});
答案 1 :(得分:0)
你想控制表分开吗?也许这directive guide可以帮助你
HTML
<table class="A" id="diagram">
<tbody id="sortable2">
<tr class="new-item">
<td>1</td>
</tr>
<tr class="new-item">
<td>2</td>
</tr>
<tr class="new-item">
<td>3</td>
</tr>
</tbody>
</table>
<br><br>
<table class="UI" id="diagram1" >
<tbody id="sortable">
</tbody>
</table>
<br><br>
<button id="button1">Clear selected row in Table class UI</button>
的javascript
test();
$("#sortable").sortable({
revert: true,
stop: function(event, ui) {
if (ui.item.hasClass("new-item")) {
// This is a new item
}
}
});
$(".new-item").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid",
stop: function( event, ui ) {
test();
},
zIndex: 10000
});
/** Highlight Statement **/
function test(){
$('#diagram tbody tr').unbind('click').bind('click',function(e) {
$('#diagram tbody tr').not(this).removeClass('test2');
$(this).toggleClass('test2');
});
$('#diagram1 tbody tr').unbind('click').bind('click',function(e) {
$('#diagram1 tbody tr').not(this).removeClass('test2');
$(this).toggleClass('test2');
});
}
CSS
table{
border: 1px solid black;
width:200px;
}
tbody tr.test2 td {
background: rgba(20, 111, 186, 0.38);
}