|
無論是事先寫好的，還是動態(tài)生成的,，要找到指定的tr或td都必須知道其相關(guān)的一個屬性,，未必必須是id或name,，然后無論是在一個table還是多個 table都可以通過document.getElementsByTagNames( "tr ")或td,，取得集合，……再根據(jù)知道的屬性再找,，最后設置顯示/隱藏
方法一：
document.getElementById( "控件ID ").style.visibility= "hidden ";
document.getElementById( "控件ID ").style.visibility= "visible ";
方法二：
document.getElementById( "控件ID ").style.display= "none ";
document.getElementById( "控件ID ").style.display= "inline ";
方法一隱藏后 頁面的位置還被控件占用 只是不顯示 類似于.net驗證控件的Display=Static
方法二隱藏后 頁面的位置不被占用 類似于.net驗證控件的Display=Dynamic
我寫的一個根據(jù)下拉菜單的不同選擇值來顯示下邊的一個input表單的顯示和隱藏
js：
function listchange(){
var sel=document.getElementsByName('tasklist_type');
for(var i=0;i<tasklist_type.options.length;i++)
{
if(tasklist_type.options[i].selected)
{
if(tasklist_type.options[i].value==0){
document.getElementById( "tasklistoriginalno").style.display= "none";
document.getElementById("tasklist_originalno").value = "";
/*上面紅色的這句話用處很大的,，因為你想隱藏掉下面的一個表單，那么這個表單的值也就不需要寫入數(shù)據(jù)庫了,，所以記得在隱藏的同時將被隱藏表單的值清空,；當然要是你不嫌麻煩的話在表單的數(shù)據(jù)提交到php的數(shù)據(jù)處理頁面的時候?qū)?/SPAN> tasklist_type根據(jù)其值是0還是1來行進判斷寫不寫入 tasklist_originalno 的值 */
}
if(tasklist_type.options[i].value==1){
document.getElementById( "tasklistoriginalno").style.display= "";
}
}
}
}
html：
<tr height='30'>
<td> <{$lang_tasklist_type}>: </td>
<td>
<select name="tasklist_type" id="tasklist_type" onchange="listchange();return false;">
<option value="null" ><{$lang_tasklist_sel}></option>
<option value="0" ><{$lang_tasklist_common}></option>
<option value="1" ><{$lang_tasklist_supplement}></option>
</select>
</td>
</tr>
<tr height='30' id='tasklistoriginalno'>
<td> <{$lang_tasklist_originalno}>:</td>
<td colspan='3'><input type='text' id='tasklist_originalno' name='tasklist_originalno'/></td>
</tr>
---------------------------------------------------------------------------------------------
上面的代碼在IE6和FF下都能成功實現(xiàn)效果，但是在IE8下不能得到相應的效果,，原因出在在IE8下用上面的代碼無法獲取到下拉列表的值,，經(jīng)測試下面的代碼可以：
js
function listchange()
{
var sel=document.getElementsByName("tasklist_type")[0].value; //獲取下拉表單的value值
if(sel=='0')
{
document.getElementById( "tasklistoriginalno").style.display= "none"; //隱藏id為tasklistoriginalno的td
document.getElementById("tasklist_originalno").value = ""; //并將其值賦為空
}
if(sel=='1')
{
document.getElementById( "tasklistoriginalno").style.display= ""; //當下拉表單的值為0時顯示
}
}
下面是測試的例子，也是我在網(wǎng)上看到的,，我們將其copy到保存到一個html頁面中在IE8下打開，OK：
<!--有表單---->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.areaName.area.options[document.areaName.area.selectedIndex].text;
alert(name);
}
</script>
<body>
<form name="areaName">
<select name="area" onchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="長沙">長沙</option>
<option value="山西">山西</option>
</select>
</form>
</body>
</html>
<!---無表單--->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.getElementsByName("area")[0].value;
alert(name);
}
</script>
<body>
<select name="area" onchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="長沙">長沙</option>
<option value="山西">山西</option>
</select>
</body>
</html >
|
