table traverse having tr id error

Question

Demo

$(function (){                
    selectServiceRow(1) ;
    $(document).on('click', '#tableList', function (e){
         var index = parseInt($(e.target).closest('tr').index());
         if(index==0){return;}
         selectServiceRow(index);
    });
});

function selectServiceRow(rowIndex){                 
     $('#tableList').find('tr').eq(rowIndex)
          .removeClass('csstrred').addClass('csstablelisttdselected');
}

from above fiddle u see that By defaut first row is selected when i click on any row from table i have to show that whatever rows have id 'error' be red but clicked row must have class csstablelistselected' *Example:*by default first row is selected.If i click on 4th row then 1st row class be display as red beacuse tr id is 'error' how should i do.

Answer 1

You're using multiple IDs of error, you should really use a class instead (it's not good practice to use duplicate IDs and it can prove a nightmare when selecting them all).

Anyway, this will solve it:

function selectServiceRow(rowIndex)
{
    var found = $("#tableList tr:eq(" + rowIndex + ")");
    $("#tableList tr").removeClass("csstablelisttdselected");
    $("#tableList tr[id='error']").addClass("csstrred");
    found.addClass('csstablelisttdselected').removeClass("csstrred");   
}

Fiddle: http://jsfiddle.net/WVQ5p/5/

Answer 2

Try this:

$(function ()
{                
    selectServiceRow(1) 

    $(document).on('click', '#tableList', function (e)
    {
        $('#tableList tr.csstablelisttdselected').each(function(){
            $(this).removeClass('csstablelisttdselected');
        });
        var index = parseInt($(e.target).closest('tr').index());
        if(index==0){return;}
        selectServiceRow(index);
    });
});

Fiddle: http://jsfiddle.net/WVQ5p/4/