Question 11407 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Select only td-elements in HTML table with specific column name – Jquery

I have a table with class .info, and I want to set the background color of all td elements, only in column Amount, where the value is " " to red.

The part of setting the color is done like this

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

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

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

but that targets all td elements in the table; how do I target a specific column/th? An example would be

<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>
Tags:

4

Answers


  1. 0

    How much legacy support do you want? There is a new browser css selector called :has that can help with this.

    You’ll still need a bit of JavaScript though:

    $(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;
}

    Demo

    Login or Signup to reply.
  2. 0

    You are targeting the wrong element.

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

    $(this) should return every td element.

    It is unclear what do you mean by the value of column Amount? I suggest adding id’s to your elements. That way you can target a specific column. for example:

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

    $(".info #ID_column").each(function () {
        var value = $(this).text();
    });
    Login or Signup to reply.
  3. 0

    Just target table element with class selector .info then find all td that are first-child, then filter them by text content (note: even if in your HTML is space, textContent returns empty string). Finaly set background color with jQuery.css. Alternatively you can define CSS rule and use 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>
    Login or Signup to reply.
  4. 0 
    .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>

    You can achive this by just using css.
    Note space inside the "td" is removed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search