Как установить класс строки таблицы на основе содержимого ячейки с помощью jQuery?

Question

У меня есть следующая таблица:

<table class="grid">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>Project 1</td>
            <td>Closed</td>
        <tr>
        <tr>
            <td>Project 2</td>
            <td>Open</td>
        <tr>
        <tr>
            <td>Project 3</td>
            <td>Closed</td>
        <tr>
    </tbody>
</table>

Я пытаюсь переместить часть своего кода пользовательского интерфейса, который я делал в коде позади, в jQuery. Я хотел бы изменить класс элемента TR всякий раз, когда столбец Status (столбец 2) имеет значение Open.

Как лучше всего это сделать с помощью jQuery?

Answer 1

$('tbody > tr', 'table.grid').filter(function() {
    return $(this).children('td').eq(1).text() == 'Open';
}).addClass('open_tr');

Что он делает:

Он выбирает все элементы <tr> внутри <tbody> контекста table.grid. Функция фильтра позволяет вам фильтровать элементы на основе того, что вы возвращаете: true для сохранения или false для отбрасывания. Таким образом, внутри фильтра мы получаем все дочерние элементы tr, получаем 2nd <td> и возвращаем, равен ли его текст 'Open' - если это так, он вернул бы true, и мы могли бы оставить родителя <tr> в селекторе. Все, что останется, тогда будет просто <tr> со статусом Open, поэтому мы можем добавить класс, чтобы пометить их как таковые.

Answer 2

Я не пишу никакого кода, потому что вы можете повторно использовать некоторые из сценариев jQuery, которые позволяют вам генерировать альтернативные цвета для строк таблицы - с небольшими изменениями.

В основном, при загрузке страницы (в терминах jQuery - при готовности документа)

1. получить ссылку на строки таблицы.
2. итерация по строкам для проверки значения конкретного столбца.
3. если это соответствует вашим требованиям, измените цвет строки.