突出显示选定的表格行。

Question

我遇到了一个问题，在拖放功能中实现某些内容。目前可拖动和排序已经实现了，但现在的问题是我正在尝试使用按钮来突出显示选定的行并将其删除。

我有两个表：A类和UI类。我设法突出显示了A类表格中的。然而，在UI类表格中，我无法突出显示。

这是我的 jsfiddle。

非常感谢您的帮助。

- Fiido93

---

$('tbody tr').not(this) 可以替换为 $(this).siblings()。 - scniro

Answer 1

您的代码和CSS存在几个问题：

第一个问题 - 您的test2 CSS选择器仅在class 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的表格）：

$('#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/

- Saar

---

但是 Saar，我不想要表 A 的某一行，能够删掉吗？你知道如何控制吗？ - Fiido93

现在添加了:not(.A)，所以A不会被删除。 - Saar

我喜欢你，老兄！你从哪里学到这些代码的？请教我，大师:D - Fiido93

from stackoverflow :) - Saar

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Saar

Answer 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);
}

- alexqoliveira

---

为什么要用两个函数来完成同样的事情？ - Saar

由于某些原因，当我将https更改为http时可以正常工作。请再试一次。 - alexqoliveira

Saar，控制两个分开的表格。 - alexqoliveira

所以提取函数并从2个处理程序中调用它，无需重复编写该函数。 - Saar

@alexqoliveira 那我如何使用删除功能？我不希望表A的行可以被删除。删除按钮仅适用于表UI行。 - Fiido93

谢谢你的帮助@alexqoliveira，我已经得到了答案 :) - Fiido93