87,993
社区成员
发帖
与我相关
我的任务
分享js或JQ控制显示隐藏
10个table 9个隐藏 点击添加 显示一个table 点击删除 隐藏一个table 10个table都显示出来 添加按钮隐藏 删除到剩一个table的时候 删除隐藏 非空判断 后台能取值 求各路大侠指教啊
...全文
请发表友善的回复…
发表回复
zengshaoxiang520 2012-06-06
- 打赏
- 举报
谢谢两位 需求还很多 说不清楚 能不能加个Q 教我
410463439 谢谢啦
410463439 谢谢啦
乌镇程序员 2012-06-05
- 打赏
- 举报
<!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>
猿敲月下码 2012-06-05
- 打赏
- 举报
<!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>
