[英]Highlight selected table row
我在拖放功能中实现某些功能时遇到问题。 到目前为止,可拖动和可排序是可以的。 现在问题是我正在尝试突出显示所选行并使用按钮删除它。
我有两个表:A类和类UI。 我设法突出显示了tr
表类A.但是在表类UI中我无法突出显示tr
。
这是我的jsfiddle 。
我真的很感谢你的帮助。
你的代码和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();
});
你想控制表分开? 也许这个jsfiddle可以帮助你
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.