How to wrap a row of the table when a checkbox in it is selected?

Question

I am working on a table in which I have to select a row when a check-box in that specific row is clicked. Only the row in which check-box is selected should be selected or lets say highlight it with red color. I have been trying to use a wrap function in JavaScript/jquery which is not showing any effect in my table. I had added the portion of code I was working. How do I do it?

Response.Write "<table><tr><td class='cell1'>Project</td><td class='cell1'>Project ID</td><td class='cell1'>Finish</td></tr>"
WHILE NOT rs.eof
    Response.Write "<tr><td class='celld'>"& rs(projectname") &".</td>"
    Response.Write "<td class='celld'>"& rs("productID") &"</td>"
    Response.Write"<td class='celld'><input var='"& rs("productID") &"' type='checkbox' id='finish' checked></td></tr>"
rs.MoveNext
WEND

<script>
    $("#finish").onclick(function(){
        $(".celld").wrap(" <div style='color:red'/>");          
    });
</script>

Answer 1

You can toggle .highlight class on parent(ancestor) tr when checkbox inside change it's state:

$(document).ready(function(){

  $("table input[type='checkbox']").on('change', function(){

     $(this).closest('tr').toggleClass("highlight");

   });        
});

Css:

.highlight{
  background-color:red;
}

Check the below snippet

 $(document).ready(function() { $("table input[type='checkbox']").on('change', function() { $(this).closest('tr').toggleClass("highlight"); }); }); 

 table { border: 2px solid blue; } table td { border: 1px solid green; } .highlight { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> <td>Col 4</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> </table> 

Answer 2

I see you're using jQuery, so it's actually quite easy. Attach an on change listener to the checkbox, and whenever a change is triggered, select it's parent tr element and apply a class to it.

$('.checkbox').on('change', function() {
    $(this).parents('tr').addClass('hightlight');
});

Note that you also need this class to be defined in your styles, for it to actually, visually change the row.

Answer 3

You have a couple of issues with your code. Firstly inside the loop you're creating multiple elements with the same id attribute, which is invalid. You should use a common class to select the elements. Also the input does not have var attribute, I presume this should be value .

From there you can attach a single event handler to all those elements which traverses the DOM to find the relevant tr . Note that the jQuery method to add a click event handler is click() , not onclick() . With checkboxes you should also hook to the change event to cater for those browsing via the keyboard. You can also set the class based on the state of the checked property of the checkbox using toggleClass() .

Finally you cannot wrap a td in a div as this too is invalid. It would be better to simply add a class to the tr which sets the required CSS rules. Something like this:

<table cellpadding="2" width="100%" cellspacing="0" border="1">
    <tr>
        <td class="tdcell1">Project</td>
        <td class="tdcell1">Project ID</td>
        <td class="tdcell1">Finish</td>
    </tr>
    <tr>
        <td class="tdcelld">Project Name #1.</td>
        <td class="tdcelld">ProductId #1</td>
        <td class="tdcelld">
            <input value="ProductId1" type="checkbox" class="finish">
        </td>
    </tr>
    <tr>
        <td class="tdcelld">Project Name #2.</td>
        <td class="tdcelld">ProductId #2</td>
        <td class="tdcelld">
            <input value="ProductId2" type="checkbox" class="finish">
        </td>
    </tr>
</table>

$(".finish").click(function(){
    $(this).closest('tr').toggleClass('red', this.checked);        
});

.red { color: red; }

Working example