jquery 仅选择HTML表中具有特定列名的td元素

qacovj5a  于 2023-01-30  发布在  jQuery
关注(0)|答案(4)|浏览(144)

我有一个.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>
bd1hkmkf

bd1hkmkf1#

只需使用类选择器.info定位表元素,然后找到所有tdfirst-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>
qni6mghb

qni6mghb2#

你想要多少传统的支持?有一个新的浏览器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;
}

演示

hm2xizp9

hm2xizp93#

你瞄准的是错误的元素。

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

$(this)应该返回每个td元素。
您不清楚Amount列的值是什么意思?我建议在元素中添加id。这样您就可以定位特定的列。例如:

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

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

xvw2m8pv4#

.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"中的空间被删除了。

相关问题