Выбор конкретных тдс в JQuery

Question

Я хочу установить флажки в таблице, если строки содержат определенное значение.

Ниже моя таблица

<table width="100%" cellspacing="0" border="1" style="border-width: thin; border-collapse: collapse;
    border-color: #999999" id="tableControlFailures">
    <tbody>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                C1
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                22
            </td>
        </tr>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                C2
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                23
            </td>
        </tr>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                c
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                9
            </td>
        </tr>
    </tbody>
</table>

Я хочу проверить строки, в которых скрытый столбец CFId содержит 23 &9.

Пожалуйста, предложите решение.

Answer 1

Очень важная вещь, как уже упоминали другие:

Идентификатор можно использовать только ОДИН РАЗ в документе HTML. В вашей разметке вы используете идентификаторы несколько раз, что просто недопустимо и нарушит функциональность CSS и Javascript. Если вы хотите назначить некоторые элементы в одну и ту же логическую группу, используйте class. Мое решение работает после изменения этих идентификаторов на классы (как показано в jsFiddle).

$('#tableControlFailures tr').filter(function () {
    return $(this).find('td.CFId:contains(23), td.CFId:contains(9)').length > 0;
}).find('input.chkCF').attr('checked', true);

jsFiddle Demo

1. Получает все строки в таблице
2. Фильтрует их с помощью функции фильтра, останутся только те, которые имеют td.CFId внутри, который содержит 23 или 9
3. В оставшемся наборе строк найдите флажки и отметьте их

Примечание: Мое решение написано для jQuery 1.5.2. В 1.6 вы должны использовать .prop('checked', true) вместо .attr('checked', true).

Answer 2

Попробуйте это

$("#tableControlFailures").find("td:contains('22'), td:contains('23')").parent("tr").find("#chkCF").prop("checked", true);

Пример на JS FIDDLE

Однако, как уже говорили другие, вы должны изменить свой td, чтобы иметь уникальные идентификаторы и использовать класс для группировки элементов. Мое решение будет работать после того, как вы установите уникальные идентификаторы

Answer 3

Я бы посоветовал вам немного переделать наценку.Вы повторяете id id = "CFId" для ячейки таблицы, вместо этого попробуйте class = "CFId".JQuery предлагает решения для чтения таких элементов с использованием правил CSS.Таким образом, вы должны иметь возможность читать ячейки таблицы с помощью класса CFId класса, используя правило css «td.CFId».

Затем выполните итерации и проверьте значения.чтобы добраться до строки, вы можете попробовать ele.parentNode выполнить модификации CSS, чтобы изменить цвет и фон на основе значений.

//to change the color based on some value
if($(cell).innerHTML === '23') {
    $(cell).parentNode.style.color = 'red'
}

Если вы просто не хотите придерживаться JQuery, это решение должноработать с JQuery API и простым JavaScript.

Answer 4

$("table").find("td:contains('23'),td:contains('9')").find(":checkbox").attr("checked",true);'