Выберите только td-элементы в таблице HTML с определенным именем столбца

У меня есть таблица с классом .info, и я хочу установить цвет фона всех элементов td, только в столбце Amount, где значение " " равно красному.

Часть установки цвета делается так

    $(document).ready(colorMissingPayment);
    function colorMissingPayment() {

        $(".info td").each(function () {
            var value = $(this).text();

            if (value == " ") {
                $(this).css("background-color", "red")
            };
        });
    };

но это нацелено на все элементы td в таблице; как настроить таргетинг на конкретный столбец/th? Примером может быть

<table class = "info">
    <tr>

        <td>
            <table>
                <h4 align = "center">2021</h4>
                <tr>
                    <th>Amount</th>
                    <th style = "width:500px">Notes</th>
                </tr>
                <tr>
                    <td> </td>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td> 200</td>
                    <td>Monday</td>
                </tr>
                <tr>
                    <td>500+500 </td>
                    <td></td>
                </tr>
            </table>
        </td>

    </tr>
</table>

используйте $(".info td:nth-child(columnNumber)") $(".info td:nth-child(1)") выберите первый столбец

Nisha 25.01.2023 08:47

Найдите индекс столбца, содержащего «Сумма», затем используйте псевдокласс nth-child() , чтобы выбрать столбец. Обратите внимание, что h4 не разрешен контент в элементе таблицы.

Teemu 25.01.2023 08:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
54
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4


Насколько вам нужна устаревшая поддержка? В этом может помочь новый CSS-селектор браузера под названием :has.

Однако вам все равно понадобится немного JavaScript:

$(document).ready(colorMissingPayment);
function colorMissingPayment() {
    $(".info td").each(function () {
        const value = $(this).text();

        if (value.trim() === '') {
            $(this).addClass('is-empty')
        };
    });
};
.info table tr:has(td.is-empty) td:first-child {
  background-color: red;
}

Демо

Вы ориентируетесь не на тот элемент.

  $(".info td").each(function () {
            var value = $(this).text();
   }

$(this) должен возвращать каждый элемент td.

Непонятно, что вы подразумеваете под значением столбца Сумма? Я предлагаю добавить идентификаторы к вашим элементам. Таким образом, вы можете настроить таргетинг на конкретный столбец. например:

<tr>
   <th id = "ID_amount">Amount</th>
   <th style = "width:500px">Notes</th>
</tr>

    $(".info #ID_column").each(function () {
        var value = $(this).text();
    });
Ответ принят как подходящий

Просто выберите элемент таблицы с помощью селектора класса .info, затем найдите все td, которые являются first-child, затем отфильтруйте их по текстовому содержимому (примечание: даже если в вашем HTML есть пробел, textContent возвращает пустую строку). Наконец, установите цвет фона с помощью jQuery.css. В качестве альтернативы вы можете определить правило CSS и использовать jQuery.addClass.

$(document).ready(colorMissingPayment);
    function colorMissingPayment() {
        $(".info").find("td:first-child").filter( (i,o) => o.innerText === "")
          .css("background-color", "red");
    };
<script
  src = "https://code.jquery.com/jquery-3.6.3.min.js" crossorigin = "anonymous"></script>
<table class = "info">
    <tr>

        <td>
            <table>
                <h4 align = "center">2021</h4>
                <tr>
                    <th>Amount</th>
                    <th style = "width:500px">Notes</th>
                </tr>
                <tr>
                    <td> </td>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td> 200</td>
                    <td>Monday</td>
                </tr>
                <tr>
                    <td>500+500 </td>
                    <td></td>
                </tr>
            </table>
        </td>

    </tr>
</table>

.info tr>td:nth-child(1):empty {
  background-color: red;
}
<table class = "info">
  <tr>
    <td>
      <table>
        <tr>
          <th>Amount</th>
          <th style = "width:500px">Notes</th>
        </tr>
        <tr>
          <td></td>
          <td>Hello</td>
        </tr>
        <tr>
          <td> 200</td>
          <td>Monday</td>
        </tr>
        <tr>
          <td>500+500 </td>
          <td></td>
        </tr>
      </table>
    </td>

  </tr>
</table>

Вы можете добиться этого, просто используя css. Обратите внимание, что пробел внутри «td» удален.

Другие вопросы по теме