Make dom object not selectable inside <tbody>

Make dom object not selectable inside <tbody>

  1. < tbody id = "selectable" >

    @ for ( int i = 1 ; i <= rowN; i ++ )

    {

    < tr >

    < th > @ i . ToString() </ th >

    @ for ( int k = 1 ; k <= columnN; k ++ )

    {

    if (k % 2 == 0 )

    {

    < td class = "book success" data-id = @ index > @ index . ToString() </ td >

    }

    else

    {

    < td class = "book active" data-id = @ index > @ index . ToString() </ td >

    }

    index ++ ;

    }

    </ tr >

    }

I am using selectable via JQuery UI. I want everything to be selectable except the row header (please see the red that is highlighted). In other words, is there an easy way to make everything in my table body selectable except the row header?


I tried to give <th> a new id and that didn't work (I didn't think this would work). I also tried to make <td> selectable, but as expected, it failed. Can someone please help?