突出显示选定的表格行答案

【问题标题】：Highlight selected table row突出显示选定的表格行
【发布时间】：2015-10-16 02:59:57
【问题描述】：

我在实现拖放功能时遇到问题。到目前为止，可拖动和可排序是可以的。现在的问题是我正在尝试突出显示选定的行并使用按钮将其删除。

我有两个表：A 类和 UI 类。我设法突出显示tr 表类A。但是在表类UI 中我无法突出显示tr。

这是我的jsfiddle。

非常感谢您的帮助。

【问题讨论】：

$('tbody tr').not(this) 可以与$(this).siblings()互换

标签： javascript jquery css jquery-ui

【解决方案1】：

您的代码和 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();
});

http://jsfiddle.net/jwb7vy9L/14/

【讨论】：

嗯我知道怎么做。但是现在表格 UI 中的目的突出显示是删除功能。我不希望表 A 行可删除。这就是我试图将它们分开的原因。
但是萨尔我不想要表A行，可以删除。你知道怎么控制吗？
添加 :not(.A) 所以现在 A 没有被删除
我爱你，伙计！ .. 你在哪里学习所有这些代码。请大师教我：D
来自stackoverflow :)

【解决方案2】：

您想控制分开的表格吗？也许这个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);
}

【讨论】：

为什么要使用 2 个函数来做同样的事情？
由于某种原因，当我将 https 更改为 http 时。请重试
萨尔，控制两个表分开
so 提取函数并从 2 个处理程序中调用它，无需编写两次函数
@alexqoliveira 那么我将如何使用删除功能呢？我不希望表 A 行可以删除。删除按钮仅适用于表格 UI 行。