2016-11-11 2 views
1

"Blog"라는 단어가있는 행만 녹색 또는 파란색으로 변경하려고한다고 가정 해 봅시다. jsfiddle에있는 예제를 참조하십시오. 그 내용에 따라 부트 스트랩 테이블의 행 색상을 변경하는 방법이 있습니까? : P내용에 따라 부트 스트랩 표 행 배경을 변경하는 방법

이 시도 jsfiddle

function rowStyle(row, index) { 
 
    var classes = ['active', 'success', 'info', 'warning', 'danger']; 
 
    
 
    if (index % 2 === 0 && index/2 < classes.length) { 
 
     return { 
 
      classes: classes[index/2] 
 
     }; 
 
    } 
 
    return {}; 
 
}
<table data-toggle="table" 
 
     data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" 
 
     data-row-style="rowStyle"> 
 
    <thead> 
 
    <tr> 
 
     <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>

+0

더 나은 출력 결과를 위해 질문에 게시 된 jsfiddle 링크를 참조하십시오. – NinjaShawarma

+0

개인적으로 Knockout JS와 같은 것을 사용하고 CSS 바인딩을 사용하여 포함 된 데이터를 기반으로 색상을 변경합니다. 완전 동적. – Korgrue

답변

1

에이 예를 참조하십시오

function rowStyle(row, index) { 
    const obj = {}; 
    if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('blog'))) { 
     obj.css = {'background-color': 'blue'}; 
    } 
    var classes = ['active', 'success', 'info', 'warning', 'danger']; 

    if (index % 2 === 0 && index/2 < classes.length) { 
     return Object.assign({}, obj, {classes: classes[index/2]}); 
    } 
    return obj; 
} 

updated JS Fiddle를 참조하십시오.

+0

이것 좀 봐 주시겠습니까? 테이블은 어떤 이상한 이유로 로딩을 계속합니다. 데이터와 관련이 있습니까? http://jsfiddle.net/e3nk137y/9727/ – NinjaShawarma

+0

@NinjaShawarma 값의 일부는 숫자이므로 'value'를 문자열로 형 변환해야합니다. http://jsfiddle.net/e3nk137y/9728/을 참조하십시오. –