首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery 兑现超链接文字隐藏tr 内容

2013-08-16 
jquery 实现超链接文字隐藏tr 内容a href# idzhuangtai 显示/atabletr styledisplay:none

jquery 实现超链接文字隐藏tr 内容
<a href="#" id="zhuangtai" >显示</a>

<table>
      <tr style="display:none" id="show">
          <td>1</td>
          <td>2</td>
      </tr>
       <tr>
          <td>1</td>
          <td>2</td>
      </tr>
</table>

$("#zhuangtai").click(function(){
                  if()
                  {
                       $("#zhuangtai").val('显示');
                  } else {
                       $("#zhuangtai").val('不显示');
                  }

 });
---------------------------------
实现用户jquery 实现通过超链接 点击显示把tr 里面的显示出来,然后超链接里面文字换成不显示,在点击不显示把tr隐藏,然后超链接里面文字换成显示
jQuery 函数
[解决办法]

<a href="#" id="zhuangtai" >显示</a>

<table>
      <tr style="display:none" id="show">
          <td>1</td>
          <td>2</td>
      </tr>
       <tr>
          <td>1</td>
          <td>2</td>


      </tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(function () {
        $("#zhuangtai").click(function () {
            if (this.innerHTML == '显示') {
                $("#zhuangtai").html('不显示');
                $('tr').show();
            } else {
                $("#zhuangtai").html('显示');
                $('tr').hide();
            }
            return false;
        })
    });
 </script>


[解决办法]
这样也可以

    jQuery(function ($) {
        $("#zhuangtai").click(function () {
            if (this.innerHTML == '显示') {
                $("#zhuangtai").html('不显示');
                $('tr:eq(0)').show();
            } else {
                $("#zhuangtai").html('显示');
                $('tr:nth-child(1)').hide();
            }
            return false;
        })
    });

热点排行