Happydevdays Happydevdays - 4 months ago 10
HTML Question

jquery - finding elements in a table and changing other elements based on findings

I'm trying to adapt other examples with similar questions here on stackoverflow... but am stumped right now.

Here's what my html table looks like after it's been rendered:

<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom </th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td>&nbsp;</td>
<td class="status_button"><button type="button" class="btn btn-success"></button></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td>&nbsp;</td>
<td class="status_button"><button type="button" class="btn btn-danger"></button></td>
</tr>
</tbody>
</table>


What I need:

After the table has been rendered, I want to find all rows that have a danger button ("btn-danger") and change the color of the text in the "Package" cell / td to red.

Based on similar questions here on stackoverflow, here's what I have so far:

122 <script>
123 $( document ).ready(function() {
124 $('.status_button').each(function(i, n) {
125 console.log($(n.innerHTML));
126 //somehow id the sibling <td> that has class
127 //package and change the font color
128 //to red
129 });
130 });
131
132 </script>


The console.log matches a property in the object and displays... but my "if" statement fails.
I was trying to copy the contents of my console.log to paste in here but haven't been successful yet.

Any tips on how i can test the value of the button class and then alter the text color in the Package field would be appreciated

Thanks.

EDIT 1

So I changed the each function to look for the btn-danger class ... and that seems to work better because it filters more results.
But I guess I still need help changing the sibling td with the class "package" to display text in red.

122 <script>
123 $( document ).ready(function() {
124 $('.btn-danger').each(function(i, n) {
125 console.log($(n.innerHTML));
126 if ($(n.innerHTML) == "button.btn.btn-danger") {
127 alert('red!!');
128 };
129 });
130 });
131
132 </script>

Answer

You can use :has selector to filter all cells with class status_button having the button you are looking for.

In order to change the color of cell with class package you can use siblings.

The snippet:

$(function () {
  $('.status_button:has("button.btn.btn-danger")').each(function(index, element) {
    $(element).siblings('.package').css('color', 'red');
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table class="table table-striped" id="status">
    <thead>
    <tr>
        <th>Name</th>
        <th>REP</th>
        <th>Package</th>
        <th> CV</th>
        <th>Latest CV</th>
        <th>Custom</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>asfasdf</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">tmm</td>
        <td>tmm-4.2.7-r1</td>
        <td>4.2.7-r1</td>
        <td>&nbsp;</td>
        <td class="status_button">
            <button type="button" class="btn btn-success"></button>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">a-cis</td>
        <td>a-cis-0.1.0-r0</td>
        <td>0.1.0-r0</td>
        <td>&nbsp;</td>
        <td class="status_button">
            <button type="button" class="btn btn-danger"></button>
        </td>
    </tr>
    </tbody>
</table>

Comments