Question

I have a table and i want some action to be perform on it by using for loop in JavaScript. So could someone tell me what will be the code for it. that the for loop will work for all rows of table. Actually i have to remove a class from the table and then after that i have to apply a class to a particular row. What my task is i have to highlighted un-highlighted the selected row. when i select any row its highlighted but when i select another row then its remain highlighted and the other one too. so i want to remove the selected class from all rows of table then apply the selected class for a particular row. MY CODE IS:

   <style type="text/css">
    .highlight
    {
        background-color: Red;
    }
    .selected
    {
        background-color: #ffdc87;
    }
</style>

<script type="text/javascript">
    function Select(obj) {
        if (obj.className != 'selected') {

            obj.className = 'selected';
            var tbl = document.getElementById("Repaddressorbbl")
            var firstRow = tbl.getElementsByTagName("TR")[0];
        }
        else {
            obj.className = 'prev_class';
            var tbl = document.getElementById("Repaddressorbbl")
            var firstRow = tbl.getElementsByTagName("TR")[0];
        }
    }

</script>

Answer 1

jQuery has implicit iteration so you don’t have to manually loop over your selected rows

// remove all "highlight" classes from all <tr> elements
$("#your-table tr").removeClass("highlight");

// highlight row 3
$("#your-table tr:eq(2)").addClass("highlight");

// highlight row that belongs to a specific <td>
$("#my-td").parents("tr").addClass("highlight")

// etc

After you’ve removed all the highlight classes, you should be able to re-highlight whichever <tr> you want pretty easily.

If you need more help, let me know 🙂