HTML 표에서 td 선택 및 선택 취소

내 웹 사이트에 하나의 셀을 선택하고 배경색을 변경 한 다음 다른 셀 (동일한 행에 없음)을 선택하고 첫 번째 셀을 가질 수있는 표가 있습니다 새로 선택한 셀이 배경색을 변경하는 동안 기본 색상으로 돌아갑니다. 나는 주변을 둘러 보았고 이미 가지고있는 물건이나 많은 체크 박스에 관한 것만을 찾은 것처럼 보일 수 있습니다. 나는 피들을 가지고있다 here. 여기 HTML 표에서 td 선택 및 선택 취소

<script type='text/javascript'>//<![CDATA[ 
    $("#table2 td").click(function() 
    { 
     $(this).toggleClass('selected').siblings().removeClass('selected'); 
    }); 
    //]]> 
</script> 

<script type='text/javascript'>//<![CDATA[ 
    $("#table tr").click(function() 
    { 
     $(this).toggleClass('selected').siblings().removeClass('selected'); 
    }); 
    //]]> 
</script>

내 HTML입니다 : 여기

.selected { 
    background-color: rgba(0,0,0,0.4) !important; 
    color: #fff; 
}

내 jQuery의 : 여기

내 CSS의,

<body> 

<table id='table'> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>Second Row</td> 
    <td>Still Second Row</td> 
    </tr> 
</table> 
<br><br> 
<table id='table2'> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tbody> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>Second Row</td> 
    <td>Still Second Row</td> 
    </tr> 
    </tbody> 
</table> 
</body>

내가 잘 선택 및 선택 해제 행을 일 table를 얻을 수 있지만, table2이 올바르게 작동하지 않습니다. 한 행의 셀을 선택한 다음 동일한 행의 셀을 선택하면 작동하지만 다른 행의 셀을 선택하면 첫 번째 셀이 기본 색으로 다시 변경되지 않습니다. 위의 바이올린은 무슨 일이 일어나고 있는지 보여줍니다.

나는 <tbody>을 추가하려고 시도했지만, 결과가 바뀌지 않았으므로 제대로하지 못했다고 생각합니다.

나는 $('.selected').removeClass('selected');을 추가하려고 시도했으며 부분적으로 작동했습니다. 한 행의 셀을 선택한 다음 다른 행의 셀을 선택하면 배경색이 올바르게 변경되지만, 첫 번째 셀을 선택하면 다시 선택 취소되지 않습니다.

출처

2016-07-28 Mike

당신이 td을 위해 형제를 선택하는 방법을 잘못이 시도

$("#table2 tbody td").click(function() 
{ 
    $(this).closest('table').find('td').not(this).removeClass('selected'); 
    $(this).toggleClass('selected'); 
});

Fiddle

출처

2016-07-28 18:14:17 ssilas777

그랬어! 나는 내가 옳은 일을하고 있지 않다는 것을 알았다. 나는 어제부터 jquery로만 작업 해왔다. – Mike

당신은 <thead></thead> 태그와 <tbody></tbody> 태그 본문 행 헤더 행을 포장 한 후 사용할 수 있습니다

$("#table tbody tr, #table2 tbody tr").click(function() { 
    $(this).siblings().removeClass('selected').end().addBack().toggleClass('selected'); 
});

jsFiddle example

출처

2016-07-28 17:58:38 j08691

<tr> <td>Second Row</td> <td>Still Second Row</td> </tr>

이 같은에 클릭 이벤트 내부에 코드를 조정합니다

<tr> <td>January</td> <td>$100</td> </tr>

이 행에있는 사람의 형제 없습니다 행을 변경, 나는 두 번째 테이블에있는 세포를 변경할 수 있기를 원합니다. – Mike

.sibling() 메서드를 호출하지만 형제가 아닌 요소를 변경하려고하기 때문에 table2에서 원하는대로 수행하지 않습니다. 이 행의 TD 년대 :이 아니라

$(this).closest('table').find('td').not(this).removeClass('selected');

출처

2016-07-28 18:16:26 Cruiser

나는이 부분을 이해하지 못했다. 나는 그들이 ''에 있기 때문에 형제가 될 것이라고 생각했습니다. 설명 주셔서 감사합니다! – Mike

HTML 표에서 td 선택 및 선택 취소

답변

관련 문제