We help IT Professionals succeed at work.

How to Highlight/de-Highlight multiple rows in a HTML table?

lohitashwa
lohitashwa asked
on
431 Views
Last Modified: 2010-04-09
I have a table with some data in HTML, my problem is whenever i click on any cell, that particular, entire row must be highlighted , multiple selection (Highlighting) must be allowed. Also I should be able to deselect (remove the highlight) if i click on a cell if it is highlighted, when I click on the submit button, the values for the rows that are highlighed must be returned, atleast any one of the column values must be returned.
Ideally if i click on a cell that is not highlighted, the entire row must be highlighted and if i click on a cell that is highlighted, the entire row must be de-highlighted. Aslo when i click on submit button, the all of the highlighted values must be returned.
Can any one help me out in this.
Comment
Watch Question

CERTIFIED EXPERT

Commented:
MaB

Commented:
A bit on the way....
I've been able to do the highlight when clicked. Got some problem with the unhighlight when clicked again though.....working on it. You should get the idea though...
Someone might be able to help out if they see the posted code.

The Hide/Show function I left in the code I started to work on. Keep if you think it adds value.

Haven't got around to the submit problem, it might need a totally different approach using forms instead of tables. You can't submit values from a table, you'll need a form of some sort.

Now, my body aches for coffe. I'll be checking back.
----------------------------------------------------------------------------------------------------------------------------
<html>

<head>
<style>
#toggle1      {
             display:none;
             }
#toggle2      {
             display:none;
             }
</style>
<script language="JavaScript">
function show(id){     
      document.getElementById(id).style.display = 'inline';
      }
</script>
<script language="JavaScript">
function hide(id){     
      document.getElementById(id).style.display = 'none';
      }
</script>
<script language="JavaScript">
function highlight(id){     
      //if (document.getElementById(id).style.color == red) {document.getElementById(id).style.color = 'default';}
      //else{
      document.getElementById(id).style.color = 'red';}
      //}
</script>
</head>

<body>
<table>
  <tr id="tr1" onClick="highlight('tr1');">
    <td width="50">&nbsp;</td>
    <td width="50">Audio</td>
    <td width="50">Books</td>
    <td width="50">CD's</td>
    <td width="50">DVD's</td>
    <td width="50">Posters</td>
    <td width="50">Video</td>
  </tr>
</table>
<table>
  <tr id="tr2" onClick="highlight('tr2');">
    <td colspan="4">STORE 1</td>
    <td colspan="4" align="right">
<p><a href="#" onClick="show('toggle1');">Show details</a>&nbsp;&nbsp;<a href="#" onClick="hide('toggle1');">Hide

details</a></p>
    </td>
  </tr>
  <tr id="tr3" onClick="highlight('tr3');">
    <td width="50">Week</td>
    <td width="50">33</td>
    <td width="50">53</td>
    <td width="50" colspan="2">29</td>
    <td width="50">25</td>
    <td width="50">30</td>
    <td width="50">31</td>
  </tr>
</table>
<div id="toggle1">
<table>
  <tr id="tr4" onClick="highlight('tr4');">
    <td width="50">Mon</td>
    <td width="50">3</td>
    <td width="50">8</td>
    <td width="50">6</td>
    <td width="50">4</td>
    <td width="50">4</td>
    <td width="50">3</td>
  </tr>
  <tr id="tr5" onClick="highlight('tr5');">
    <td width="50">Tue</td>
    <td width="50">10</td>
    <td width="50">20</td>
    <td width="50">2</td>
    <td width="50">2</td>
    <td width="50">1</td>
    <td width="50">9</td>
  </tr>
  <tr id="tr6" onClick="highlight('tr6');">
    <td width="50">Wen</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">8</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr7" onClick="highlight('tr7');">
    <td width="50">Thu</td>
    <td width="50">9</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">4</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr8" onClick="highlight('tr8');">
    <td width="50">Fri</td>
    <td width="50">3</td>
    <td width="50">5</td>
    <td width="50">7</td>
    <td width="50">6</td>
    <td width="50">5</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr9" onClick="highlight('tr9');">
    <td width="50">Sat</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">0</td>
    <td width="50">0</td>
    <td width="50">8</td>
    <td width="50">7</td>
  </tr>
</table>
</div>
<table>
  <tr id="tr10" onClick="highlight('tr10');">
    <td colspan="4">STORE 2</td>
    <td colspan="4" align="right">
<p><a href="#" onClick="show('toggle2');">Show details</a>&nbsp;&nbsp;<a href="#" onClick="hide('toggle2');">Hide

details</a></p>
    </td>
  </tr>
  <tr id="tr11" onClick="highlight('tr11');">
    <td width="50">Week</td>
    <td width="50">32</td>
    <td width="50">33</td>
    <td width="50">22</td>
    <td width="50">22</td>
    <td width="50">40</td>
    <td width="50">12</td>
  </tr>
</table>
<div id="toggle2">
<table>
  <tr id="tr12" onClick="highlight('tr12');">
    <td width="50">Mon</td>
    <td width="50">3</td>
    <td width="50">8</td>
    <td width="50">6</td>
    <td width="50">4</td>
    <td width="50">4</td>
    <td width="50">3</td>
  </tr>
  <tr id="tr13" onClick="highlight('tr13');">
    <td width="50">Tue</td>
    <td width="50">10</td>
    <td width="50">20</td>
    <td width="50">2</td>
    <td width="50">2</td>
    <td width="50">1</td>
    <td width="50">9</td>
  </tr>
  <tr id="tr14" onClick="highlight('tr14');">
    <td width="50">Wen</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">8</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr15" onClick="highlight('tr15');">
    <td width="50">Thu</td>
    <td width="50">9</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">4</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr16" onClick="highlight('tr16');">
    <td width="50">Fri</td>
    <td width="50">3</td>
    <td width="50">5</td>
    <td width="50">7</td>
    <td width="50">6</td>
    <td width="50">5</td>
    <td width="50">4</td>
  </tr>
  <tr id="tr17" onClick="highlight('tr17');">
    <td width="50">Sat</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">0</td>
    <td width="50">0</td>
    <td width="50">8</td>
    <td width="50">7</td>
  </tr>
</table>
</div>
</body>

</html>
MaB

Commented:
I'm only in IE so I don't know how cross browser compatible this is though.
BR MaB

Commented:
MaB - couldn't you have posted a longer example? =P

Try this:
__________________________________________________________________________

<HTML>
  <HEAD>
    <TITLE>My Table Page</TITLE>

    <SCRIPT LANGUAGE="javascript"><!--
      function highlightRow(myID) {
        var myEle = document.getElementById(myID);

        if (myEle.style.backgroundColor == document.body.style.backgroundColor) {
          myEle.style.backgroundColor = '#FF0000';

        } else {
          myEle.style.backgroundColor = document.body.style.backgroundColor;

        }
      }
    //--></SCRIPT>

  </HEAD>

  <BODY STYLE="background: #FFFFFF;">
    <TABLE BORDER="1">
      <TR ID="R1" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 1</TD>
        <TD>Cell 2</TD>
      </TR>

      <TR ID="R2" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 3</TD>
        <TD>Cell 4</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

__________________________________________________________________________


Regards,

Haydn
MaB

Commented:
-Haydn
No i couldnt write more code because my screen resolution doesn't allow it, it would fall below the screen. ;-)

Seriously. Thanks for the tip, it's most valuable.

BR MaB
MaB

Commented:
Changed the highlight function to this:

<script language="JavaScript">
function highlight(id){     
      if (document.getElementById(id).style.color == document.body.style.color)

{document.getElementById(id).style.color = 'red';}
      else{
      document.getElementById(id).style.color = document.body.style.color;}
      }
</script>

and it works like charm. Thanks Haydn.
(I better not post the whole code or you'll get a scrollwheel injury. LOL )
MaB

Commented:
Now, the problem with the submit I have to leave right now. Goin' home to my family for the weekend. I'll check back on monday (or from home in the weekend) to see what's happening.

Have a nice weekend y'all.

MaB

Commented:
" Now, the problem with the submit I have to leave right now."

just create a for loop to check each row of the table as follows:
__________________________________________________________________________

<HTML>
  <HEAD>
    <TITLE>My Table Page</TITLE>

    <SCRIPT LANGUAGE="javascript"><!--
      function highlightRow(myID) {
        var myEle = document.getElementById(myID);

        if (myEle.style.backgroundColor == document.body.style.backgroundColor) {
          myEle.style.backgroundColor = '#FF0000';

        } else {
          myEle.style.backgroundColor = document.body.style.backgroundColor;

        }
      }

      function getValues() {
        var myTbl = document.getElementById("myTable");

        for(i = 0; i < myTbl.rows.length; i++) {
          if (myTbl.rows[i].style.backgroundColor != document.body.style.backgroundColor) { alert(myTbl.rows[i].id); }
        }
      }

    //--></SCRIPT>

  </HEAD>

  <BODY STYLE="background: #FFFFFF;">
    <TABLE ID="myTable" BORDER="1">
      <TR ID="R1" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 1</TD>
        <TD>Cell 2</TD>
      </TR>

      <TR ID="R2" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 3</TD>
        <TD>Cell 4</TD>
      </TR>
    </TABLE>

    <FORM>
      <INPUT TYPE="button" VALUE="Submit" onClick="getValues()">
    </FORM>
  </BODY>
</HTML>
__________________________________________________________________________


Regards,

Haydn.
MaB

Commented:
whoa, you're good at this...

Nice, but I believe what lohitashwa wanted was to have all the values in the highlighted table cells returned, and not the tablerow id.

Do you have any idea how to solve that?

BR MaB
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi Guys,
"Practically perfect in every way." - Merry Popins. Looks good and solves my problem. I have to tailor it a bit to suit my needs, but this one working absolutely fine.

Thanks for the wonderful code.
MaB

Commented:
Nice done Haydn.

MaB

Author

Commented:
Hi,
I want some refinement to the code, is it possible i can add a ID to each row, but this value must be hidden, it should not be displayed to the user. When submit is clicked, along with the cell data, even the ID (Hidden value) must be returned,
For example, if the table i am using consists of the Login details displayed for the user, the loginid will not be displayed, but this field must be hidden, when i highlight on any user and click on submit along with the cell value, even the loginid must be returned.

Can you guys kindly let me know how to do it? Since I am new to javascript.
MaB

Commented:
Well, you can combine Haydn's most excellent code example and use the loginid as tablerow id's like this:

<HTML>
  <HEAD>
    <TITLE>My Table Page</TITLE>

    <SCRIPT LANGUAGE="javascript"><!--
      function highlightRow(myID) {
        var myEle = document.getElementById(myID);

        if (myEle.style.backgroundColor == document.body.style.backgroundColor) {
          myEle.style.backgroundColor = '#FF0000';

        } else {
          myEle.style.backgroundColor = document.body.style.backgroundColor;

        }
      }

      function getValues() {
        var myTbl = document.getElementById("myTable");


        for(i = 0; i < myTbl.rows.length; i++) {
          if (myTbl.rows[i].style.backgroundColor != document.body.style.backgroundColor) {alert(myTbl.rows[i].id);
            for(j = 0; j < myTbl.rows[i].cells.length; j++) {
              alert(myTbl.rows[i].cells[j].innerHTML);
            }
          }
        }
      }

    //--></SCRIPT>

  </HEAD>

  <BODY STYLE="background: #FFFFFF;">
    <TABLE ID="myTable" BORDER="1">
      <TR ID="R1" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 1</TD>
        <TD>Cell 2</TD>
      </TR>

      <TR ID="R2" STYLE="background: #FFFFFF;" onClick="highlightRow(this.id);">
        <TD>Cell 3</TD>
        <TD>Cell 4</TD>
      </TR>
    </TABLE>

    <FORM>
      <INPUT TYPE="button" VALUE="Submit" onClick="getValues()">
    </FORM>
  </BODY>
</HTML>

This will however not make the login id "invisible" to the page readers since all they have to do is view source to find the ID's. If you wan't a solution where the users can't watch other users id's you should go for a server side code like ASP or PHP. That will execute the code at the server and present the results to the user instead of making all code available for the users view.

BR MaB

Commented:
"Can you guys kindly let me know how to do it? Since I am new to javascript."

To expand on MaB's comment, javascript is a client side language, i.e: it will run on the users machine. Due to this fact there isn't much you can do to completely hide a value in javascript as the source can always be seen. You would need to use a server side language to obtain a vlaue you want hidden.

Regards,

Haydn.
MaB

Commented:
Thanks for the elucidation, Haydn.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.