JQ控制显示隐藏

zengshaoxiang520 2012-06-06 01:27:10

<table id="table_1"></table>
<table id="table_2"></table>
<table id="table_3" style="display:none"></table>
<table id="table_4" style="display:none"></table>
<table id="table_5" style="display:none"></table>
<table id="table_6" style="display:none"></table>
<table id="table_7" style="display:none"></table>
<table id="table_8" style="display:none"></table>
<table id="table_9" style="display:none"></table>
<table id="table_10" style="display:none"></table>
<a>添加<a><a>删除</a>

点击添加 table_3显示再点table_4显示点击删除 table_4隐藏再点 table_3隐藏
当table_10显示出来添加隐藏当table_2隐藏删除隐藏这个要怎么写啊求帮助

...全文

413 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

MyLinda 2012-06-06

打赏
举报

刚才写顺手了，在函数里用flag 的时候直接写成 i 了。
$(ary[i]) 指的是把 ary[i] 转换成JQuery对象，当然，你可以不这么做。

MyLinda 2012-06-06

打赏
举报

[Quote=引用 3 楼的回复:]

2楼按你写了没用啊点了没效果
[/Quote]
调试一下啊...给你全码吧

<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

var i = 0

$(document).ready(function(){

  var ary = $(".hidenTable");

  $("#linkAdd").click(function(){

    $(ary[i]).css("display","");

    if(i < ary.length)

      i = i + 1;

    return false;

  });

  $("#linkDel").click(function(){

    if(i > 0)

      i = i - 1;

    $(ary[i]).css("display","none");

    return false;

  })

})

</script>

</head>

<table id="table_1">

<tr><td>1</td></tr>

</table>

<table id="table_2">

<tr><td>2</td></tr>

</table>

<table class="hidenTable" id="table_3" style="display:none">

<tr><td>3</td></tr>

</table>

<table class="hidenTable" id="table_4" style="display:none">

<tr><td>4</td></tr>

</table>

<table class="hidenTable" id="table_5" style="display:none">

<tr><td>5</td></tr>

</table>

<table class="hidenTable" id="table_6" style="display:none">

<tr><td>6</td></tr>

</table>

<table class="hidenTable" id="table_7" style="display:none">

<tr><td>7</td></tr>

</table>

<table class="hidenTable" id="table_8" style="display:none">

<tr><td>8</td></tr>

</table>

<table class="hidenTable" id="table_9" style="display:none">

<tr><td>9</td></tr>

</table>

<table class="hidenTable" id="table_10" style="display:none">

<tr><td>10</td></tr>

</table>

<a href="javascript:void(0)" id="linkAdd" >添加</a><a href="javascript:void(0)" id="linkDel">删除</a>

</html>

zengshaoxiang520 2012-06-06

打赏
举报

2楼按你写了没用啊点了没效果

MyLinda 2012-06-06

打赏
举报

1、给你的添加和删除连接加ID linkAdd linkDel
2、给你隐藏的table 加个 class hidenTable



var flag = 0

$(document).ready(function(){

  var ary = $(".hidenTable");

  $("#linkAdd").click(function(){

    ary[i].css("display","");

    if(i < ary.length)

      i = i + 1;

    return false;

  });

  $("#linkDel").click(function(){

    ary[i].css("display","none");

    if(i > 0)

      i = i - 1;

    return false;

  })

})