js或JQ控制显示隐藏解决办法-JavaSript-爱易网页

js或JQ控制显示隐藏解决办法

日期：2014-05-16　浏览次数：20547 次

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

------解决方案--------------------

HTML code

<!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>

------解决方案--------------------

HTML code<!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 --) {

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js或JQ控制显示隐藏解决办法

相关资料更多>

推荐阅读更多>