Jquery Change Class OnClick

benners70
benners70 used Ask the Experts™
on
I'm fairly new to javascript and jquery and I'd appreciate some help with the following.

I'm need to click an href and the jquery to change the class for the TR containing the HREF and then open a new window with the correct URL. Please see attached code.

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.paulbenbow.co.uk/" />
<title></title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
tr.clicked {
	background-color:#CCCCCC;
}
</style>
</head>
<body>
<table>
  <th><b>#</b></th>
    <th><b>Title</b></th>
    <th><b>Clicks</b></th
  </th>
  <tr id="1" class="clicked">
    <td>1</td>
    <td>xx</td>
    <td class="click"><a href="pclick.asp?bid=1&tId=1" target="_blank">1</a></td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>xx</td>
    <td class="click"><a href="pclick.asp?bid=1&tId=2" target="_blank">2</a></td>
  </tr>
  <tr id="3">
    <td>3</td>
    <td>xx</td>
    <td class="click"><a href="pclick.asp?bid=1&tId=3" target="_blank">3</a></td>
  </tr>
  <tr id="4">
    <td>4</td>
    <td>xx</td>
    <td class="click"><a href="pclick.asp?bid=1&tId=4" target="_blank">4</a></td>
  </tr>
  <tr id="5">
    <td>5</td>
    <td>yy</td>
    <td class="click"><a href="pclick.asp?bid=2&tId=1" target="_blank">1</a></td>
  </tr>
</table>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I have read that page and it loads a function that detects clicks on an certain element. I need to pass a URL from the href to a jquery function and I can't see how to do this from that page.
change your anchor link markup to

  <tr id="2">
    <td>2</td>
    <td>xx</td>
    <td class="click"><a href="javascript:gotoURL(this, 'pclick.asp?bid=1&tId=2')">2</a></td>
  </tr>

<script>
   function gotoURL( thisObj, url )
   {
        window.open(url);
        $(thisObj).parent().parent().toggleClass("newClass");
   }
</script>

Author

Commented:
Hi gurvinder372.
The toggle isn't working. It doesn't seem to be passing anything to the function.
alert(thisObj);
Gives [objext window]'
try just adding the class, by changing the code to

 function gotoURL( thisObj, url )
   {
        $(thisObj).parent().parent().addClass("newClass");
        window.open(url);
   }
</script

Author

Commented:
That doesn't work. Isn't the problem caused by the "thisObj" variable not being correctly set?
alert(thisObj);
Gives [objext window]'
check this sample code then
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.4.2.min.js"></script>
<script>
	function gotoURL( id, url )
	{
		var obj = $("#"+id);
        obj.removeClass("clicked");
        obj.addClass("clicked1");
		window.open(url);
	}
</script>
<style>
tr.clicked {
	background-color:#CCCCCC;
}
tr.clicked1 {
	background-color:#CCdddd;
}
</style>
</head>
<body>
<table>
  <th><b>#</b></th>
    <th><b>Title</b></th>
    <th><b>Clicks</b></th
  </th>
  <tr id="1" class="clicked">
    <td>1</td>
    <td>xx</td>
    <td class="click"><a href="javascript:gotoURL( '1', 'pclick.asp?bid=1&tId=1')">1</a></td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>xx</td>
    <td class="click"><a href="javascript:gotoURL( '2', 'pclick.asp?bid=1&tId=2')">2</a></td>
  </tr>
  <tr id="3">
    <td>3</td>
    <td>xx</td>
    <td class="click"><a href="javascript:gotoURL( '3', 'pclick.asp?bid=1&tId=3')">3</a></td>
  </tr>
  <tr id="4">
    <td>4</td>
    <td>xx</td>
    <td class="click"><a href="javascript:gotoURL( '4', 'pclick.asp?bid=1&tId=4')">4</a></td>
  </tr>
  <tr id="5">
    <td>5</td>
    <td>yy</td>
    <td class="click"><a href="javascript:gotoURL( '5', 'pclick.asp?bid=2&tId=1')">1</a></td>
  </tr>
</table>
</body>
</html>

Open in new window

Author

Commented:
Thank you! That's working for me now.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial