Question

在bootstrap-table中，我怎么能这样做，列Item Price中的max（min）值可以改变它的颜色

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<table id="table" data-toggle="table">
   <thead>
            <tr>
                <th data-field="id" data-sortable="true">Item ID</th>
                <th data-field="name" data-sortable="true">Item Name</th>
                <th data-field="price" data-sortable="true">Item Price</th>
            </tr>
    </thead>
     <tbody>
        <tr><td>3</td><td>first</td> <td>5.4</td></tr>
        <tr><td>1</td><td>second</td><td>7.8</td></tr>
        <tr><td>2</td><td>third</td><td>2.1</td></tr>
        <tr><td>4</td><td>thourth</td><td>7.8</td></tr>
    </tbody>
</table>

Answer 1

你可以使用Javascript：

op=0;
var max = 0;
$('.price').each(function(i, obj) {
     $this = parseFloat( $(this).text() );
      if ($this > max) {
         max = $this;
         op = i;
                       }
 });

var all = document.getElementsByClassName('price');
 all[op].style.color = 'red';

你可以编辑你的html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<table id="table" data-toggle="table">
   <thead>
            <tr>
                <th data-field="id" data-sortable="true">Item ID</th>
                <th data-field="name" data-sortable="true">Item Name</th>
                <th data-field="price" data-sortable="true">Item Price</th>
            </tr>
    </thead>
     <tbody>
        <tr><td>3</td><td>first</td> <td class="price">5.4</td></tr>
        <tr><td>1</td><td>second</td><td class="price">10.2</td></tr>
        <tr><td>2</td><td>third</td><td class="price">12.3</td></tr>
        <tr><td>4</td><td>thourth</td><td class="price">7.8</td></tr>
    </tbody>
</table>

<强> Demo

Answer 2

您可以使用post-body.bs.table event，在文件准备就绪和身体后活动中，您可以：

排序你的表
按最大或最小值过滤
设置您喜欢的颜色

function styleMaxMin(isMax) {
    isMax = isMax == undefined ? true : isMax;
    var sortedTbl =
           $('#table tbody td:last-child').sort(isMax ?
                   (a, b) => {return +b.textContent - +a.textContent} :
                   (a, b) => {return +a.textContent - +b.textContent});
    sortedTbl.filter(function (idx, ele) {
        var currVal = +ele.textContent;
        return currVal == +sortedTbl.eq(0).text();
    }).css('color', 'red');
}

$(function () {
    styleMaxMin();
    $('#table').on('post-body.bs.table', function (e, data) {
        styleMaxMin();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>


<table id="table" data-toggle="table">
    <thead>
    <tr>
        <th data-field="id" data-sortable="true">Item ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>3</td>
        <td>first</td>
        <td>5.4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>second</td>
        <td>7.8</td>
    </tr>
    <tr>
        <td>2</td>
        <td>third</td>
        <td>2.1</td>
    </tr>
    <tr>
        <td>4</td>
        <td>thourth</td>
        <td>7.8</td>
    </tr>
    </tbody>
</table>

bootstrap-table列上的max（min）值

2 个答案: