Unselect Unknown Selectable

Question

논리적으로 2 분의 1로 나눈 테이블이 있습니다. 이미지 에서처럼 행의 절반 만 선택해야합니다.

이제 다른 "반"행을 선택하면 이전 행을 선택 해제해야합니다. 내가 어떻게 그럴 수 있니? 내 코드는 여기에 있습니다 : 나는이 클래스를 제거하는 또 다른 줄을 추가해야 할 것 같아요

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

: 내가 어떤 td을 클릭하면, 같은 ID를 가진 모든 td의이 코드를 사용하여 선택받을

<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> 

이전에 선택한 td에서 내가 어떻게 그럴 수 있니? 감사.

Answer 1

<td> -s 다른 클래스에 tdclss라고 말한 다음 함수에 사용하여 ui-selected 클래스를 제거하십시오.

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

Answer 2

같은 ID를 가진 여러 필드를 사용하면 조만간 문제가 생길 수 있습니다. 클래스 속성을 사용하여 셀을 그룹화하거나 그룹화하기 위해 <span>을 사용할 수 있습니다 (인정해야하지만 <tr> 내에서 <span>을 시도한 적이 없습니다).

Answer 3

한 가지 방법 :.

$('input:radio').change(
    function(){ 
     // caching the jQuery $(this) object 
     var that = $(this); 
      that 
       // moves up to the closest ancestor table element 
       .closest('table') 
       // finds the '.selected' elements within that table 
       .find('.selected') 
       // removes the 'selected' class from those elements. 
       .removeClass('selected'); 
      that 
       // moves to the parent td element 
       .parent() 
       // selects subsequent siblings *until* it finds 
       // an element that matches the selector 
       .nextUntil($('td:has("input:radio")')) 
       // adds back the current td element to the collection 
       .andSelf() 
       // adds the 'selected' class 
       .addClass('selected'); 
    });​ 

JS Fiddle demo

참고 :

• addClass().
• andSelf().
• closest().
• find().
• :has() selector.
• nextUntil().
• parents().