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(); });})// 获取隐藏的tablefunction getHideTables() { return $("#tableArea").find("table:hidden");}// 获取隐藏table的个数function getHideTablesCount() { return getHideTables().length;}// 获取显示的tablefunction 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个tablefunction 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 --) { 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>