У меня есть таблица с классом .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>
Найдите индекс столбца, содержащего «Сумма», затем используйте псевдокласс nth-child() , чтобы выбрать столбец. Обратите внимание, что h4
не разрешен контент в элементе таблицы.
Насколько вам нужна устаревшая поддержка? В этом может помочь новый 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» удален.
используйте $(".info td:nth-child(columnNumber)") $(".info td:nth-child(1)") выберите первый столбец