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/

Answer 2

You want to control the tables separated? Maybe this jsfiddle can help you

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