Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: How to change background color of row onclick?

  1. #1
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to change background color of row onclick?

    I have a multi column table with radio buttons in column 1, when i select this radio button, the entire row should change the color from white to orange. How to do this? Pls help...

    The script given here uses moveover, i want it when i select the radio button....

    http://www.dynamicdrive.com/dynamici...lighttable.htm

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    I finally got it! I edited http://www.w3schools.com/js/tryit.as...yjs_form_radio to fit your purposes. There is a drop-down menu version for body background color at http://www.w3schools.com/myfirst/js07.asp
    Code:
    <head>
    <script type="text/javascript">
    function check(x)
    {
    document.getElementById("glow").bgColor=x
    }
    </script>
    </head>
    <body>
    <p>What's your favorite browser:</p>
    <form>
    <input type="radio" name="name" onclick="check(this.value)" value="blue">Blue<br />
    <input type="radio" name="name" onclick="check(this.value)" value="red">Red<br />
    <input type="radio" name="name" onclick="check(this.value)" value="yellow">Yellow<br />
    <input type="radio" name="name" onclick="check(this.value)" value="white">White<br />
    <br />
    <table><tr id=glow>
    <td>slfhsljdf</td>
    <td>jfhskjfhd</td>
    </tr><tr>
    <td>ajlsfhjksd</td>
    <td>sjdfhsdf</td>
    </tr></table>
    </form>
    </body>
    Table row "glow" is highlighted whatever color you select.

  3. #3
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot my friend.

  4. #4
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just one thing, this is my scenario, i have radio buttons in the first column, there are many rows with radio buttons in the first column, if you select a radio button the entire row (where the radio button is) should change its background.. if you select another radio button, this row should return to its original bg and the other row should be highlighted.. sorry for not mentioning this before...

    Thanks

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    I'm not positive about what you're trying to say, but I think this may help:

    <html>
    <head>
    <script language="javascript">
    function color(newC,oldC,button) {
    newC.bgColor = "silver"
    oldC.bgColor = "white"
    }
    </script>
    </head>
    <body onload="color(c1,c2,name)">
    <table>
    <tr>
    <td width="100">
    <input type="radio" checked name="name" onclick="color(c1,c2,this)">Test 1<br />
    </td>
    <td id="c1" width="100">Test Col 1</td>
    </tr>
    <tr>
    <td width="100">
    <input type="radio" name="name" onclick="color(c2,c1,this)">Test 2<br />
    <td id="c2" width="100">Test Col 2</td>
    </td>
    </tr>
    </table>
    </body>
    </html>
    - Mike

  6. #6
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I need this script to work when you click on a link. Clicking on a link in row 1should highlight (change bg color) for the entire row. Cliking on a link from the second row should set the bg color of row 1 to default and change the bg color of row 2.

    Please Help.

    Thanks.

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Hmm..

    This is the best I can do:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ie = document.all
    var ns = document.getElementById && !ie
    function rowclick(e) {
    var obj = ns ? e.target : event.srcElement
    if (obj.tagName=="TD") {
    obj.style.background="red"
    	obj.onblur=function() {
    		obj.style.background="white"
    	}
    }
    }
    document.onclick=rowclick
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    </table>
    </body>
    </html>
    - Mike

  8. #8
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I used this script to change BG color of a row.. How do i reset the bgcolor of the previous row when i click the next row?

    Code:
    <html>
    <head>
    <title>Test BG Change</title>
    <style>
    .td1 { background-color: #990000;color : #ffffff; }
    .td2 { background-color: #ffffcc;color : #336699; }
    </style>
    
    <script language=javascript> 
    function callme(rno)
    {
    var tmp = document.getElementById(rno); 
    tmp.className='td2'
    }
    </script>
    </head>
    
    <body>
    <table width=200 border=1>
    <tr id="t1" class=td1 onClick=javascript:callme('t1')><td><a href="#">some text</a></td><tr>
    <tr id="t2" class=td1 onClick=javascript:callme('t2')><td><a href="#">some text</a></td><tr>
    <tr id="t3" class=td1 onClick=javascript:callme('t3')><td><a href="#">some text</a></td><tr>
    <tr id="t4" class=td1 onClick=javascript:callme('t4')><td><a href="#">some text</a></td><tr>
    </table>
    </body>
    </html>

  9. #9
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the script mburt.. this works for IE but not on FireFox.. however in IE, when i add a "a href" tag, it doesnt work.. see the script below.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ie = document.all
    var ns = document.getElementById && !ie
    function rowclick(e) {
    var obj = ns ? e.target : event.srcElement
    if (obj.tagName=="TD") {
    obj.style.background="#e6e6e6"
    	obj.onblur=function() {
    		obj.style.background="#ff0066"
    	}
    }
    }
    document.onclick=rowclick
    </script>
    </head>
    <body>
    <table>
    <tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
    <tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
    <tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
    <tr><td>test</td></tr>
    </table>
    </body>
    </html>

  10. #10
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This works perfect in IE - thanks to mburt. Now please tell me what should i do to make it work for other browsers (FireFox) ?!?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ie = document.all
    var ns = document.getElementById && !ie
    function rowclick(e) {
    var obj = ns ? e.target : event.srcElement
    if (obj.tagName=="A") {
    obj.style.background="#ff0066"
    	obj.onblur=function() {
    		obj.style.background="#ffffff"
    	}
    }
    }
    document.onclick=rowclick
    </script>
    </head>
    <body>
    <table>
    <tr><td><a href="#">test</a></td></tr>
    <tr><td><a href="#">test</a></td></tr>
    <tr><td><a href="#">test</a></td></tr> 
    <tr><td><a href="#">test</a></td></tr>
    </table>
    </body>
    </html>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •