js或JQ控制显示隐藏

10个table  9个隐藏   点击添加  显示一个table   点击删除   隐藏一个table   10个table都显示出来  添加按钮隐藏  删除到剩一个table的时候   删除隐藏     非空判断    后台能取值         求各路大侠指教啊

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    create10tables();

    $("#add").click(function(){
    var $hideTables = getHideTables();
    if(getHideTablesCount() > 0) {
    var $nextShowTable = $hideTables.eq(0);
    $nextShowTable.show();
    }

    checkAddButton();
    }); $("#del").click(function(){
    var $showTables = getShowTables();
    if(getShowTablesCount() > 1) {
    $showTables.eq(0).hide()
    }

    checkDelButton();
    });
    })// 获取隐藏的table
    function getHideTables() {
    return $("#tableArea").find("table:hidden");
    }// 获取隐藏table的个数
    function getHideTablesCount() {
    return getHideTables().length;
    }// 获取显示的table
    function getShowTables() {
    return $("#tableArea").find("table:visible");
    }// 获取显示table的个数
    function getShowTablesCount() {
    return getShowTables().length;
    }// 控制按钮
    function checkAddButton() {
    if(getHideTablesCount() == 0) {
    $("#add").hide();
    }
    if(getShowTablesCount() > 1) {
    $("#del").show();
    }
    }function checkDelButton() {
    if(getShowTablesCount() == 1) {
    $("#del").hide();
    }
    if(getHideTablesCount() > 0) {
    $("#add").show();
    }
    }// 创建10个table
    function create10tables() {
    var $body = $("body");
    var tableArr = [];
    for(var i=0;i<10;i++) {
    tableArr.push('<TABLE style="display:none;" border="1"><TR><TD>'+i+'</TD></TR></TABLE>');
    } $("#tableArea").html(tableArr.join(''));
    }
    </script>
    </HEAD><BODY>
    <INPUT id="add" TYPE="button" VALUE="Add">
    <INPUT id="del" TYPE="button" VALUE="Del"><div id="tableArea"></div></BODY>
    </HTML>
      

  2.   

    <!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 type="text/javascript">
    window.onload = function() {
    //为了让html不至于太长，动态生成10只表格
    var o = document.createElement('table');
    o.style.display = 'none';
    o.insertRow(0).insertCell(0).innerHTML = 'DEMO';
    for (var i = 0; i < 10; i ++) document.getElementsByTagName('body')[0].appendChild(o.cloneNode(true));

    var obj = document.getElementsByTagName('table');
    obj[0].style.display = '';

    document.getElementById('btn_add').onclick = function() {
    document.getElementById('btn_remove').style.display = '';
    for (var i = 0; i < obj.length; i ++) {
    if (obj[i].style.display == 'none') {
    obj[i].style.display = '';
    if (i == obj.length - 1) this.style.display = 'none';
    break;
    }
    }
    }
    document.getElementById('btn_remove').onclick = function() {
    document.getElementById('btn_add').style.display = '';
    for (var i = obj.length - 1; i >= 0; i --) {
    if (obj[i].style.display == '') {
    obj[i].style.display = 'none';
    if (i == 0) this.style.display = 'none';
    break;
    }
    }
    }
    }
    </script>
    </head><body>
    <button id="btn_add">添加</button><button id="btn_remove">删除</button>
    </body>
    </html>