NinjaShawarma NinjaShawarma - 26 days ago 5
Javascript Question

How to change bootstrap-tabe row background depending on its content

Let's say I want to change only the rows that have the word "Blog" in them to green or blue. See the example I have in jsfiddle. Is there a way to change the row color of a bootstrap-table depending on its content? :P

See this example on 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>




Answer

Try this:

function rowStyle(row, index) {
    const obj = {};
    if (Object.keys(row).map(key => row[key]).some(value => 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;
}

See updated JS Fiddle.