Search code examples
jquerycssjquery-uiselectable

Unselect unknown selectable

I have a table thats devided logically in 2 halves. I will have to select only half of a row as in the image. enter image description here

Now if I choose a different "half" row, I need to deselect the previous one. How would I do that? My code is here:

<tr class="line1">
    <td width="10" class="td3523" onclick="selectme('3523');">
        <input type="radio" name="selattendance" id="tr3523" onClick="setEditDelete(3523)"/>
    </td>
    <td width="100" class="td3523" onclick="selectme('3523');">2012-11-19</td>
    <td width="125" class="td3523" onclick="selectme('3523');">
        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0;padding: 0;border-collapse: collapse">
            <tr> 
                <td style="width: 50%;padding-right: 10px;border: 0" align="right" valign="middle">22:54</td>
                <td style="width: 20%;border: 0">     <a href="#" onclick="loadPic('attendanceimages/39286a0a6b45cae9f116b11882f36046.jpg','2012-11-19','2012-11-19','add','','In','22:54:04','22:54:04');"><img src="images/punchimg.png"></a>
                </td>
                <td style="width: 20%;border: 0">&nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

When I click on any td, all tds with the same ID get selected using this code:

function selectme(id) {
    $('.td' + id).toggleClass("ui-selected");
}

I guess I need to put another line removing this class from previously selected tds. How would I do that? Thanks.

Solution

  • Give your <td>-s another class say tdclss then use it in your function to remove ui-selected class.

    function selectme(id) {
  $('.tdclss').removeClass("ui-selected");
  $('.td' + id).toggleClass("ui-selected");
}