利用JavaScript控制table中row的显示
From : http://www.cnblogs.com/mhx1982/archive/2006/06/01/414505.html
<script language=javascript >
function changeRow(id, status) {
document.getElementById("Row1").style.display ="none";
document.getElementById("Row2").style.display ="none";
document.getElementById("Row3").style.display ="none";
var elm = document.getElementById("Row"+id);
if (!elm)
return false;
elm.style.display = (status == true) ? "" : "none";
}
</script>
<table width="100%" border="0">
<tr>
<td>
<select name="select" onchange="javascript: changeRow(this.value,true);">
<option value="0">None</option>
<option value="1">Row1</option>
<option value="2">Row2</option>
<option value="3">Row3</option>
</select>
</td>
</tr>
<tr id=Row1 style="display: none;">
<td bgcolor="#99FF00">Row1</td>
</tr>
<tr id=Row2 style="display: none;">
<td bgcolor="#CCCC99">Row2</td>
</tr>
<tr id=Row3 style="display: none;">
<td bgcolor="#FFCC99">Row3</td>
</tr>
</table>
其中
elm.style.display = (status == true) ? "" : "none";
比较重要,控制显示
<script language=javascript >
function changeRow(id, status) {
document.getElementById("Row1").style.display ="none";
document.getElementById("Row2").style.display ="none";
document.getElementById("Row3").style.display ="none";
var elm = document.getElementById("Row"+id);
if (!elm)
return false;
elm.style.display = (status == true) ? "" : "none";
}
</script>
<table width="100%" border="0">
<tr>
<td>
<select name="select" onchange="javascript: changeRow(this.value,true);">
<option value="0">None</option>
<option value="1">Row1</option>
<option value="2">Row2</option>
<option value="3">Row3</option>
</select>
</td>
</tr>
<tr id=Row1 style="display: none;">
<td bgcolor="#99FF00">Row1</td>
</tr>
<tr id=Row2 style="display: none;">
<td bgcolor="#CCCC99">Row2</td>
</tr>
<tr id=Row3 style="display: none;">
<td bgcolor="#FFCC99">Row3</td>
</tr>
</table>
其中
elm.style.display = (status == true) ? "" : "none";


浙公网安备 33010602011771号