javascript - 如何根据条件更改 jtable 中列的特定行颜色？

Question

 paymentStatus: {
                title: 'Payment Status',
                width: '8%',
                options: {'Paid': 'Paid', 'Due': 'Due'},
                create: false,
                edit: false,
                list: true
            },

更具体地说，我希望 paymentStatus 的颜色在“到期”时为红色，在“已支付”时为绿色。

Answer 1

我不太了解 jtable，但你可以像这样在 Jquery 中这样做

$(function(){
    $('#studentlist tr td').each(function(){
        var i = $(this).index();
        // since i'm interested in the 3rd column, I check for i === 2
        // if you were interested in the 9th column, it would be i === 8
        if (i === 2) {
            $(this).addClass( $(this).text().toLowerCase() );
        }
    });
});

table td {
    border: 1px solid silver;
}

.due {
    background-color: red;
}

.paid {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table caption="student list" id="studentlist">
    <thead>
        <tr>
            <th>Name</th>
            <th>Room</th>
            <th>Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sean</td>
            <td>101</td>
            <td>Due</td>
        </tr>
         <tr>
            <td>Kyle</td>
            <td>230</td>
            <td>Due</td>
        </tr>
         <tr>
            <td>Mohammed</td>
            <td>169</td>
            <td>Paid</td>
        </tr>       
    </tbody>
</table>