在网页中设计两个表格，要求两个表格采用JS和DIV技术进行控制，通过按钮可以使两个表格的显示相互切换。

当按钮显示为【显示成绩表】时，下方为“学生信息表”；当点击按钮后，按钮的显示变为【显示学生信息表】，下方的表格也变为了“成绩表”~~~~~~~也就是只用同一个按钮控制，表格发生了切换！（答案要完整一点哦！因为我怕改来改去待会又要麻烦您~！）

举报该文章

相关建议 2012-10-15

思路：
写两个<div style="display:none"><table>.....</div>
分别放入“成绩表”、“信息表”

按钮：<button onclick=“abc(this)”>显示成绩表</button>
JS：
function abc(o){
if(o.value.indexOf("成绩表")>0){
o.value="显示信息表" //改变按钮名字
id1.style.display="none" //隐藏表格
id2.style.display="" //显示表格
}
if(o.value.indexOf("信息表")>0){
o.value="显示成绩表"
id2.style.display="none" //隐藏表格
id1.style.display="" //显示表格
}
}

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/s7v7qsfm7.html

其他看法

第1个回答 2012-10-14

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="button" id="_switch" value="显示成绩表" />
<div id="_tablea">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<th>姓名</th>
<th>信息</th>
</tr>
<tr>
<td>撒旦法</td>
<td>斯蒂芬斯蒂芬</td>
</tr>
</table>
</div>
<div id="_tableb" style="display:none;">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>撒旦法</td>
<td>111</td>
</tr>
</table>
</div>
<script>
document.getElementById('_switch').onclick = function(){
if (this.value=='显示成绩表'){
this.value='显示学生信息表';
document.getElementById('_tablea').style.display='none';
document.getElementById('_tableb').style.display='block';
}
else {
this.value='显示成绩表';
document.getElementById('_tablea').style.display='block';
document.getElementById('_tableb').style.display='none';
}
};
</script>
</body>
</html>本回答被提问者和网友采纳

第2个回答 2012-10-16

那样做一个TAB选项卡比较好，让用户可见两个选项选择性切换更直观。
JS的tab百度搜索有很多，这里也不贴一堆乱七八糟的代码了。

第3个回答 2012-10-16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="btn" value='显示学生信息'/>
<div id="mark">mark</div>
<div id="info" style='display:none;'>info</div>
<script type="text/javascript" charset="utf-8">
function _(s){
return typeof s=='string'?document.getElementById(s):null;
}
var obtn=_('btn');
obtn.onclick=function(){
if(this.value=='显示学生信息'){
_('mark').style.display='none';
_('info').style.display='block';
this.value='显示学生成绩';
}else{
_('mark').style.display='block';
_('info').style.display='none';
this.value='显示学生信息';
}
}
</script>
</body>
</html>

相似回答

大家正在搜