부트 스트랩 테이블에서 선택된 행 배경색을 덮어 씁니다.

Question

jQuery 부트 스트랩 테이블 플러그인을 사용하고 있으며 다음 행을 클릭 할 때 선택한 행의 색상을 변경하고 원래 색상으로 복원해야합니다. 이 바이올린 http://jsfiddle.net/haideraliarain/e3nk137y/789/은 어떻게하는지 설명합니다. 그러나 기본 녹색 대신 내 선택의 색상 강조 표시를하고 싶습니다. 색상을 변경하는 아래 코드를 사용하여 시도했지만 문제는 선택한 행의 색상이 다음 클릭시 변경되고 즉시 적용되지 않는다는 것입니다. 여기 내 피들입니다 https://jsfiddle.net/amotha/1yvr1kun/2/ 어떻게하면 현재 클릭이 변경 될 수 있습니까?

HTML :

<table id="table" data-toggle="table" 
     data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" 
     data-click-to-select="true" 
     data-single-select="true"> 
    <thead> 
    <tr> 
     <th data-field="state" data-checkbox="true" data-visible="false"></th> 
     <th data-field="name">Name</th> 
     <th data-field="stargazers_count">Stars</th> 
     <th data-field="forks_count">Forks</th> 
     <th data-field="description">Description</th> 
    </tr> 
    </thead> 
</table> 

JS :

$('#table').on('click-row.bs.table', function (e, row, $element) { 
     $('.success').removeClass('success'); 
     $('.success').css("background-color","#fff"); 
     $($element).addClass('success'); 
     $('.success').css("background-color","#00FFFF"); 
}); 

Answer 1

가 jsfiddle 변화는

.success td 
{ 
    background-color:red !important; 
} 

Answer 2

내가 선택한 테이블 배경에 대한 CSS를 생성 한 CSS 부분에 원하는 색상을 수행 같은 색상 :

<style> 
.tblcss{ 
    background-color: red /* You can use any color of you choice here */ 
} 
</style> 

및 사용 :

$('#table').on('click-row.bs.table', function (e, row, $element) { 
     $('.success').removeClass('tblcss'); 
     $($element).addClass('tblcss'); 
}); 

업데이트 된 Fiddle

Answer 3

을 확인 CSS에서 사용자 정의 클래스를 추가

tr.custom--success td { 
    background-color: #000000; /*custom color here add !important if you don't want the hover color*/ 
} 

를 그런 다음 자바 스크립트 :

$('#table').on('click-row.bs.table', function (e, row, $element) { 
    $('.custom--success').removeClass('custom--success'); 
    $($element).addClass('custom--success'); 
}); 

JSFiddle : https://jsfiddle.net/8kguL1ow/1/

이렇게하면 필요한 것을 얻을 수 있습니다.

불명확 한 점이 있으면 물어보십시오. 그 다음에는 왜 그리고 무슨 일이 일어나는지 조금 더 깊이 설명하겠습니다.

Answer 4

이 Jsfiddle

$('#table').on('click-row.bs.table', function (e, row, $element) { 
    $($element).siblings().removeClass('success');  
    $($element).addClass('success'); 

    });