CODEWITHSUNDEEP
javascriptcsshtml-tablehighlight
Tabitha
Tabitha

Reputation: 3

Highlight table row on button click

enter image description here

In this table, the goal is to highlight the row on selected radio when the "Pending" or "Accomplished" button is clicked. The highlight color would correspond to the button clicked. So far I only learned how to highlight the row when the row is selected. 

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" width="100%">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>#</th>
                                    <th>Complex</th>
                                    <th>Unit#</th>
                                    <th>Date Requested</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                </tbody>
                                </table>

My CSS to incorporate the highlight colors

.highlight_row_pending {
        background-color: #DCAC61;
    }
.highlight_row_accomp {
        background-color: #67A8DA;
    }

Upvotes: 0

Views: 2375

Answers (1)

Tweath
Tweath

Reputation: 134

I'm not quite sure if this is what you were trying to achieve but if I understood your question correctly, this should help you.

Also next time you might wanna add the buttons that are included in your image since we don't have the code you have, this will be easier and save time for the people who are trying to help you.

<button data-value="highlight_row_pending">Pending</button>
<button data-value="highlight_row_accomp">Accomplished</button>

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" border="1" width="100%">
  <thead>
    <tr>
        <th></th>
        <th>#</th>
        <th>Complex</th>
        <th>Unit#</th>
        <th>Date Requested</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
  </tbody>
</table>

jQuery

$("button").each(function(){
    $(this).click(function(){
    var button_value = $(this).data("value");
    $("tr").each(function(){
      if($(this).find("input[type='radio']").is(':checked')){
        $(this).children("td").removeClass().addClass(button_value);
      }
    });
  });
});

Added jsFiddle https://jsfiddle.net/0nnxnxsq/1/

Upvotes: 1

Related Questions