CODEWITHSUNDEEP
javascriptjquerycsshtml
Shivanand L.C
Shivanand L.C

Reputation: 105

How to change current table row as highlighted if any modification done in that row using jquery

how to make current table row as highlighted if I change any input text or image of that particular table row using Jquery. As code given below which contains two rows, so out of which how to make any of the row as highlighted if I modify input text or change image by keypress event or any other solutions please let me know

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <textarea class="form-control"></textarea>
      </td>
      <td>
        <div class="browse-chg-img">
          <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
          <div class="overlay">
            <div class="text" style="font-size: 10px;">Change Image</div>
          </div>
        </div>
      </td>
      <td>
        <button type="button" class="btn btn-primary">Save</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <textarea class="form-control"></textarea>
      </td>
      <td>
        <div class="browse-chg-img">
          <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
          <div class="overlay">
            <div class="text" style="font-size: 10px;">Change Image</div>
          </div>
        </div>
      </td>
      <td>
        <button type="button" class="btn btn-primary">Save</button>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 57

Answers (2)

Hema Nandagopal
Hema Nandagopal

Reputation: 678

Try giving styles to tr,

<style>
    tr:focus { background: yellow; }
    </style>
    <table>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td><input type="text" class="form-control" ></td>
                                                    <td><textarea class="form-control"></textarea></td>
                                                    <td>
                                                        <div class="browse-chg-img">
                                                            <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
                                                            <div class="overlay">
                                                                <div class="text" style="font-size: 10px;">Change Image</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary">Save</button>                                                    
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>2</td>
                                                    <td><input type="text" class="form-control" ></td>
                                                    <td><textarea class="form-control"></textarea></td>
                                                    <td>
                                                        <div class="browse-chg-img">
                                                            <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
                                                            <div class="overlay">
                                                                <div class="text" style="font-size: 10px;">Change Image</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary">Save</button>                                                    
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

Upvotes: 0

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

Try this,

$(document).ready(function() {
  $('td').on('keydown', function(ev) {
    $('tr').css('background-color','');
    $(this).closest('tr').css('background-color','red');        
  });
});

jsFiddle for the same

https://jsfiddle.net/0k8Lu50v/

Upvotes: 1

Related Questions