jquery控制行的显示隐藏的问题

<!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="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr").click(function() { $(this).next("tr").toggle(); });
});
</script>
</head><body>
<TABLE class=maintable0 id=joblist cellSpacing=0 cellPadding=0 width=950 
border=0>
    <TBODY>
     <TR class=listtitle>
      <TD width=20></TD>
      <TD width=930>职位名称</TD>
      <TD width=20></TD>
      <TD width=300>公司名称</TD>
      <TD width=80>工作地点</TD>
      <TD width=90>发布日期</TD>
      <TD width=80></TD>
     </TR>
     <TR class="trB2 borderBt">
      <TD class=left align=middle>&nbsp;</TD>
      <TD id=dvJobTit><A class=jobLink 
      href="#" 
      target=_blank>总帐会计</A></TD>
      <TD></TD>
      <TD id=dvCompNM><A class=companyLink 
      href="#" 
      target=_blank>南京亿竞源通信科技有限公司</A></TD>
      <TD width=80>南京</TD>
      <TD width=90>11-11-25</TD>
      <TD class=tdJobDetails title=点击查看职位描述/要求><SPAN 
      class=showJobDetail>职位描述</SPAN></TD>
     </TR>
     <TR class=trB2>
      <TD width=20></TD>
      <TD width=930 colSpan=6><UL class=jobdetailCon>
        <LI><FONT class=grey12h>公司性质：</FONT><FONT 
        class=grey12>民营</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
        class=grey12h>公司规模：</FONT><FONT 
        class=grey12>20-99人</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<FONT 
        class=grey12h>经验要求：</FONT><FONT 
        class=grey12>2年以上</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
        class=grey12h>最低学历：</FONT><FONT 
        class=grey12>专科及同等学历</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<BR>
         女性，2年总账经验（一般纳税人）年龄学历不限
         <DIV class=toprightCorner><A 
        href="#"></A><BR>
          <A class=blue12line 
        href="javascript:zlzp.searchjob.saveOne('CC350560817J90250009000_635')">收藏</A></DIV>
        </LI>
       </UL></TD>
     </TR>
     <TR class="trW2 borderBt">
      <TD class=left align=middle><INPUT 
      onclick="zlzp.uncheckAll('allvacancyid')" type=checkbox 
      value=CC139410361J90250511000_599 name=vacancyid></TD>
      <TD id=dvJobTit><A class=jobLink 
      href="#" 
      target=_blank>分公司总经理</A></TD>
      <TD></TD>
      <TD id=dvCompNM><A class=companyLink 
      href="#" 
      target=_blank>北京楚天龙科技发展有限公司</A></TD>
      <TD width=80>沈阳</TD>
      <TD width=90>11-11-25</TD>
      <TD class=tdJobDetails title=点击查看职位描述/要求><SPAN 
      class=showJobDetail>职位描述</SPAN></TD>
     </TR>
     <TR class=trW2>
      <TD width=20></TD>
      <TD width=930 colSpan=6><UL class=jobdetailCon>
        <LI><FONT class=grey12h>公司性质：</FONT><FONT 
        class=grey12>民营</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
        class=grey12h>公司规模：</FONT><FONT 
        class=grey12>500-999人</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<FONT         class=grey12h>经验要求：</FONT><FONT 
        class=grey12>5-10年</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
        class=grey12h>最低学历：</FONT><FONT 
        class=grey12>本科/学士及同等学历</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<BR>
         *此工作岗位需能够接受集团公司安排，异地工作。 
         岗位职责：1.全面负责分公司的各项业务和人员管理工作，确保完成年度任务、实现年度目标；2.做好本公司的投标和述标工作，积极获取相关信息；3.指导营销人员做好客户公关工作，有效地开拓新客户，维护老客户，加强与客户接触的深度，加强其业务知识和公关技巧，以便...
         <DIV class=toprightCorner><A 
        href="javascript:zlzp.searchjob.ajaxApplyBrig1('CC139410361J90250511000_599','ssi','1')"></A><BR>
          <A class=blue12line 
        href="javascript:zlzp.searchjob.saveOne('CC139410361J90250511000_599')">收藏</A></DIV>
        </LI>
       </UL></TD>
     </TR>
    </TBODY>
   </TABLE>
</body>
</html>最近找到jquery的这种隐藏/显示方法(原文出处:http://topic.csdn.net/u/20100107/17/E6000C81-6338-4F8A-870A-931CC96584B4.html)
$(function(){
$("tr").click(function() { $(this).next("tr").toggle(); });
});但是我想把上面改成这样:
$(function(){
$(".showJobDetail").click(function() { $(this).next("tr").toggle(); });
});
却没有反应,也就是想把当点击"职位描述"的时候,把下一行的<tr></tr>实现隐藏与显示
而这个是有反应的:
$(function(){
$(".showJobDetail").click(function() { alert('hello world!'););
});有经验的,请问我要的那个怎样写?

解决方案 »

  1.   

    <!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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".showJobDetail").click(function() { 
    $(this).parents("tr").next("tr").toggle();
    });
    });
    </script>
    </head><body>
    <TABLE class=maintable0 id=joblist cellSpacing=0 cellPadding=0 width=950 
    border=0>
        <TBODY>
         <TR class=listtitle>
          <TD width=20></TD>
          <TD width=930>职位名称</TD>
          <TD width=20></TD>
          <TD width=300>公司名称</TD>
          <TD width=80>工作地点</TD>
          <TD width=90>发布日期</TD>
          <TD width=80></TD>
         </TR>
         <TR class="trB2 borderBt">
          <TD class=left align=middle>&nbsp;</TD>
          <TD id=dvJobTit><A class=jobLink 
          href="#" 
          target=_blank>总帐会计</A></TD>
          <TD></TD>
          <TD id=dvCompNM><A class=companyLink 
          href="#" 
          target=_blank>南京亿竞源通信科技有限公司</A></TD>
          <TD width=80>南京</TD>
          <TD width=90>11-11-25</TD>
          <TD class=tdJobDetails title=点击查看职位描述/要求><SPAN 
          class=showJobDetail>职位描述</SPAN></TD>
         </TR>
         <TR class=trB2>
          <TD width=20></TD>
          <TD width=930 colSpan=6><UL class=jobdetailCon>
            <LI><FONT class=grey12h>公司性质：</FONT><FONT 
            class=grey12>民营</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
            class=grey12h>公司规模：</FONT><FONT 
            class=grey12>20-99人</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<FONT 
            class=grey12h>经验要求：</FONT><FONT 
            class=grey12>2年以上</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
            class=grey12h>最低学历：</FONT><FONT 
            class=grey12>专科及同等学历</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<BR>
             女性，2年总账经验（一般纳税人）年龄学历不限
             <DIV class=toprightCorner><A 
            href="#"></A><BR>
              <A class=blue12line 
            href="javascript:zlzp.searchjob.saveOne('CC350560817J90250009000_635')">收藏</A></DIV>
            </LI>
           </UL></TD>
         </TR>
         <TR class="trW2 borderBt">
          <TD class=left align=middle><INPUT 
          onclick="zlzp.uncheckAll('allvacancyid')" type=checkbox 
          value=CC139410361J90250511000_599 name=vacancyid></TD>
          <TD id=dvJobTit><A class=jobLink 
          href="#" 
          target=_blank>分公司总经理</A></TD>
          <TD></TD>
          <TD id=dvCompNM><A class=companyLink 
          href="#" 
          target=_blank>北京楚天龙科技发展有限公司</A></TD>
          <TD width=80>沈阳</TD>
          <TD width=90>11-11-25</TD>
          <TD class=tdJobDetails title=点击查看职位描述/要求><SPAN 
          class=showJobDetail>职位描述</SPAN></TD>
         </TR>
         <TR class=trW2>
          <TD width=20></TD>
          <TD width=930 colSpan=6><UL class=jobdetailCon>
            <LI><FONT class=grey12h>公司性质：</FONT><FONT 
            class=grey12>民营</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
            class=grey12h>公司规模：</FONT><FONT 
            class=grey12>500-999人</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<FONT         class=grey12h>经验要求：</FONT><FONT 
            class=grey12>5-10年</FONT>&nbsp;&nbsp;&nbsp;&nbsp; <FONT 
            class=grey12h>最低学历：</FONT><FONT 
            class=grey12>本科/学士及同等学历</FONT>&nbsp;&nbsp;&nbsp;&nbsp;<BR>
             *此工作岗位需能够接受集团公司安排，异地工作。 
             岗位职责：1.全面负责分公司的各项业务和人员管理工作，确保完成年度任务、实现年度目标；2.做好本公司的投标和述标工作，积极获取相关信息；3.指导营销人员做好客户公关工作，有效地开拓新客户，维护老客户，加强与客户接触的深度，加强其业务知识和公关技巧，以便...
             <DIV class=toprightCorner><A 
            href="javascript:zlzp.searchjob.ajaxApplyBrig1('CC139410361J90250511000_599','ssi','1')"></A><BR>
              <A class=blue12line 
            href="javascript:zlzp.searchjob.saveOne('CC139410361J90250511000_599')">收藏</A></DIV>
            </LI>
           </UL></TD>
         </TR>
        </TBODY>
       </TABLE>
    </body>
    </html>
      

  2.   

    $(".showJobDetail").click(function() {
     $(this.parentNode.parentNode.nextSibling).toggle();
     });
      

  3.   

    都是JQUERY方法,JQUERY好强大,基本我们想要用到的功能,它都整合到了