Highlight selected table row

Question

I have a problem implementing something in a drag and drop function. So far draggable and sortable is ok. Right now the problem is I'm trying to highlight the selected row and delete it using button.

I have two tables: class A and class UI. I managed to highlight the tr table class A. However in table class UI I can't highlight the tr.

Here is my jsfiddle.

I really appreciate for your help.

Answer 1

You had several issues with your code and CSS:

first issue - Your test2 CSS selector was set only to work under table with class A:

your code:

.A tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

my fix, be generic:

tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

next issue, your click was never called on 2nd table: your code (only under table with ID diagram):

$('#diagram tbody tr').click(function(e) {
    $('#diagram tbody tr').not(this).removeClass('test2');
    $(this).toggleClass('test2');
});

my code (event delegation for all tables):

$('tbody').on("click","tr",function(e) {
    $('tbody tr').not(this).removeClass('test2');
    $(this).toggleClass('test2');
});

working fiddle: http://jsfiddle.net/jwb7vy9L/9/

working fiddle with delete:

$("#button1").on("click",function(e){
    $("table:not(.A) .test2").remove();
});

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