HTML+JavaScript: How to highlight a row on click of a button in Javascript?

Question

I am using below code to generate a dynamic table-

<!DOCTYPE html>
<html>
<head>
    <script>
        document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
        document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
        for (row = 1; row < 5; row++) {

            document.write("<tr>");

            for (col = 1; col <= 4; col++) {
                if(col == 1) {
                    document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
                }
                if(col == 2) {
                    document.write("<td width='140'>Name</td>");
                }
                if(col == 3) {
                    document.write("<td width='200'>Location</td>");
                }
                if(col == 4) {
                    document.write("<td><button type='button'>select</button></td>");
                }
            }

            document.write("</tr>")

        }

        document.write("</table>")
    </script>

</body>
</html>

When the select button is clicked the table row should highlight the entire row. Any idea how to implement it in javascript & css ?

Actually I'm not much familiar with jquery. Can't it be done in javascript ? — Anurag Chakraborty
– Anurag Chakraborty, Commented Jul 27, 2015 at 12:51
Why you are using two nested loops? You don't need second one - you can remove all "if"s and whole for cycle — areim
– areim, Commented Jul 27, 2015 at 12:52

Guruprasad J Rao · Accepted Answer · 2015-07-30 09:45:50Z

3

Here you go! Add a function to your button onclick while creating it and write a function as below:

DEMO

So changed button html before appending will be

document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
                                          ^^^^^Add this

and a function

function highlight(ctrl){
   var parent=ctrl.parentNode.parentNode;
   parent.style.background='red';
}

UPDATE

To remove previous selected on click of other below is one of the approach you can opt to:

DEMO

CSS

.backChange{
    background:red;
}

JS

Scenario 1

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr'); //get all the tr elements
   for(var i=0;i<elements.length;i++)
        elements[i].className=''; //clear the className from all the tr elements
   var parent=ctrl.parentNode.parentNode;
   parent.className="backChange"; //add ClassName to only this element's parent tr

}

Scenario 2

Now If you have classList that are already there in tr and you just want to add or remove one particular class which changes its style then you can do it as below:

DEMO

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].classList.remove('backChange'); //remove one particular class from list of classNames in that element
   var parent=ctrl.parentNode.parentNode;
   parent.classList.add("backChange");//Add that particular class to classList of element's parent tr
}

UPDATE 2

Without using Class and applying inline styles you can try as below:

DEMO

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].style.background=''; //remove background color
   var parent=ctrl.parentNode.parentNode;
   parent.style.background="red";//add it to specific element.

}

edited Jul 30, 2015 at 9:45

answered Jul 27, 2015 at 12:54

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Anurag Chakraborty Over a year ago

Thanks @GuruprasadRao your code is working but in this way if I click another row select button then that row is also being highlighted. If we can erase the previous row colour and highlight the new one then that would be very helpful.

Guruprasad J Rao Over a year ago

@AnuragChakraborty updated answer.. check and let me know!!

Anurag Chakraborty Over a year ago

I don't know but with CSS it's not working. Earlier code was working fine. It's not giving any error in console. Simply not working

Guruprasad J Rao Over a year ago

did you check the demo??

Anurag Chakraborty Over a year ago

yeah in try it editor (w3schools) also it's working fine. can we do it without css class ?

|

Pete · Accepted Answer · 2015-07-27 12:53:14Z

3

You can achieve what you want by adding an onclick function to your button:

<button type='button' onclick='highlight(this)'>

And then include the function before your loop:

function highlight(button) {
    button.parentNode.parentNode.className = 'highlight';
    // the first parentNode is the td
    // the second is the tr, 
    // then you add a class of highlight to the row
}

And add the css for the highlight:

.highlight {background:red;}

Example fiddle

answered Jul 27, 2015 at 12:53

Pete

58.8k31 gold badges132 silver badges187 bronze badges

6 Comments

Pete Over a year ago

Could be a user called simi tkd - downvotes seemed to happen as his answer was deleted

Guruprasad J Rao Over a year ago

Any ways to visit his profile!! Even he might have got reputation down!

Guruprasad J Rao Over a year ago

from my side too +1 !! We have valid answers!!

Anurag Chakraborty Over a year ago

Your code works perfectly. But how can we revert/toggle it? Like if we click again select button of another row previous coloured row will be gone and this new row will be highlighted. Do you have any idea ?

Pete Over a year ago

you need to check to see if the classname is already added: jsfiddle.net/mskwbo93/3

|

Sachin Chandil · Accepted Answer · 2015-07-27 12:55:17Z

Have a look at following snippet:

function hightLight(ele)
{
    ele.parentElement.parentElement.className = "highlight";
}

document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row=1; row<5; row++)
{
  document.write("<tr>");
  for (col=1; col<=4; col++) 
  {
     if(col==1)
     {                       document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
      }
       if(col==2)
       document.write("<td width='140'>Name</td>");
       if(col==3)
       document.write("<td width='200'>Location</td>");
       if(col==4)
       document.write("<td><button onclick='hightLight(this)' type='button'>select</button></td>");
    }
       document.write("</tr>");
  }
       document.write("</table>");

.highlight
{
  background-color:yellow;
  }

<!DOCTYPE html>
<html>
<body>
</body>
</html>

Abhitalks · Accepted Answer · 2015-07-27 13:05:26Z

I would advise against using a button here and rather use the checkboxes which you already have. If you use a button to select a row, then how would you de-select it? You can then use the buttons to fire up actions on the selected row.

From a raw Javascript perspective (i.e. without using any library like jQuery etc.), you can work your algorithm like this:

Find all checkboxes in the table,
Bind a "change" event to all these checkboxes,
If the checkbox is checked then select the row by changing its parent's (td) parent (tr) background color.

Putting this together:

var chk = document.querySelectorAll("table input[type=checkbox]");

for (i = 0; i < chk.length; i++) {
    chk[i].addEventListener("change", function() {
        selectRow(this);
    });
}
function selectRow(elem) {
    if (elem.checked) {
        elem.parentNode.parentNode.style.backgroundColor = 'yellow';
    } else {
        elem.parentNode.parentNode.style.backgroundColor = '';
    }
}

<table>
    <thead>
        <tr><th>Select</th><th>Name</th><th>Location</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 1</td>
            <td>Location 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 2</td>
            <td>Location 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 3</td>
            <td>Location 3</td>
        </tr>
    </tbody>
</table>

G.L.P · Accepted Answer · 2015-07-27 12:54:08Z

0

Try like this if you caan use JQuery Demo

$("button").on("click", function () {
    $("tr").each(function () {
        $(this).removeClass("highlight");
    });
    $(this).closest("tr").addClass("highlight");
});

CSS:

.highlight {
    background-color:#ccc;
    color:#000000;
    font-weight:bold;
}

answered Jul 27, 2015 at 12:54

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

Comments

The_Black_Smurf · Accepted Answer · 2015-07-27 14:39:04Z

0

$('#your_table_id').on('click', 'td', function () {
  $(this).closest('tr').css({'background-color': 'red'});
});

edited Jul 27, 2015 at 14:39

The_Black_Smurf

5,29714 gold badges58 silver badges80 bronze badges

answered Jul 27, 2015 at 12:57

Lapenkov Vladimir

3,2386 gold badges30 silver badges38 bronze badges

3 Comments

kenorb Over a year ago

Please add some explanation to your answer.

kenorb Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

Lapenkov Vladimir Over a year ago

i agree this is not pure javascript . JQuery comment: I register function after your code. If somebody clicks on td, function searches parent 'tr' element and highlights it to red

Collectives™ on Stack Overflow

HTML+JavaScript: How to highlight a row on click of a button in Javascript?

6 Answers 6

8 Comments

6 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

6 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related