jQuery Forum

Hi,
I've solved by myself one of the two problems. Now, when I click on the <tr> of my html table, I can highlight the <tr>. But the problem is that I can not highlight the whole <tr> as you can see in  demo:

http://tegattiweb.altervista.org/registro/provaData.php

Please, can someone helps me?

Thanks in advance.

Tegatti

You have 2 tables after  var table = $('#miaTabella').dataTable();

JAKE,

many thanks for your replay.

I think that I find the row index by this:

var table = $('#miaTabella').dataTable();
   
    $('#miaTabella tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selezione')) {
            $(this).removeClass('selezione');            
        }
        else {
            table.$('tr.selezione').removeClass('selezione');
            $(this).addClass('selezione');
        }       
    });
Is it true?

If It is true how can I use
$('[aria-describedby="miaTabella_info"]')

Thanks

Tegatti   

     var table = $('#miaTabella').dataTable();
    $('#miaTabella tbody').on('click', 'tr', function () {
            var rowIndex = $(this).index(),

Not working.

Is "miaTabella_info" a class?

Tegatti

No it is 

JAKE;
I've changed the function with your directives.
It doesn,t work completely well. I can not set up the instruction to remove classe when the mouse is out. I thik the proble is here: $('[aria-describedby="miaTabella_info"]  I don't have the control on the whole row (<tr>), but just on the first table or on the second one.
 I've done it in this way:
$(document).ready( function () {
var oTable = $('#miaTabella').dataTable( {
        "sScrollY": "200px",
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bSort":     false,
        "bFilter":   false,   
    } );
   
    new FixedColumns( oTable, {
        "iLeftColumns": 3,
        "iLeftWidth": 290
    });
   
    var table = $('#miaTabella').dataTable();
   
    $('#miaTabella tbody').on('click', 'tr', function () {
        var rowIndex = $(this).index() + 2,
        rows=$('[aria-describedby="miaTabella_info"] tr').eq(rowIndex); 
        if ($(this).hasClass('selezione'))
        {
            $(this).removeClass('selezione');
        }
        else {
            table.$('tr.selezione').removeClass('selezione');
            $(this).addClass('selezione');
        }       
    });
   
    $('#miaTabella tbody').on('mouseover', 'tr', function () {
        var rowIndex = $(this).index() + 2,
        rows=$('[aria-describedby="miaTabella_info"] tr').eq(rowIndex);
        // $('#miaTabella').addClass('sfondoTabella').removeClass('dataTable');
        if ($(this).hasClass('sfondoTabella'))
        {
            $(this).removeClass('sfondoTabella');
            rows.removeClass('sfondoTabella');
        }
        else {
            table.$('tr.sfondoTabella').removeClass('sfondoTabella');
            $(this).addClass('sfondoTabella');
            rows.addClass('sfondoTabella'); 
        }
               
    }); 

});   
     
</script> 


Tegatti

I've changed but I have the some result.

<script>
$(document).ready( function () {
var table = $('#miaTabella').DataTable( {
        "sScrollY": "300px",
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bSort":     false,
        "bFilter":   false,   
    } );
   
    new $.fn.dataTable.FixedColumns( table, {
        leftColumns: 3
    });

    $('#miaTabella tbody').on('click', 'tr', function () {
        var rowIndex = $(this).index() + 2,
        rows=$('[aria-describedby="miaTabella_info"] tr').eq(rowIndex);
        if ($(this).hasClass('selezione')) {
               rows.removeClass('selezione'); 
        }else{
               $('tr.selezione').removeClass('selezione');
               rows.addClass('selezione'); 
        }
    });
   
    $('#miaTabella tbody').on('mouseover', 'tr', function () {
            var rowIndex = $(this).index() + 2,
            rows=$('[aria-describedby="miaTabella_info"] tr').eq(rowIndex);
        if ($(this).hasClass('sfondoTabella')) {
               rows.removeClass('sfondoTabella'); 
        }else{
               $('tr.sfondoTabella').removeClass('sfondoTabella');
               rows.addClass('sfondoTabella'); 
        }
    });

});   
     
</script> 


Any help is appreciated.

Tegatti

Great JAKE,

it work really fine.

Many, many thanks.

Have a nice Sunday.

Tegatti