asked on

Jquery Change Class OnClick

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

Cong Minh Vo

http://api.jquery.com/toggleClass/

benners70

ASKER

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.

Gurvinder Pal Singh

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>

benners70

ASKER

Hi gurvinder372.
The toggle isn't working. It doesn't seem to be passing anything to the function.
alert(thisObj);
Gives [objext window]'

Gurvinder Pal Singh

try just adding the class, by changing the code to

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

benners70

ASKER

That doesn't work. Isn't the problem caused by the "thisObj" variable not being correctly set?
alert(thisObj);
Gives [objext window]'

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

benners70

ASKER

Thank you! That's working for me now.