2013年5月24日

動態的顯示或隱藏Table的Tr

如果我們要把Html裡的一列TR用開關，來進行開關某一列，我們可以動態改Style裡的Display，要隱藏設定為none，要顯示就設為table-row:

<tr id="result_tr" style="display: none;">

<script type="text/javascript">
//隱藏TR
function hide_tr()
{
alert("hide");
var result_style = document.getElementById('dyn_tr').style;
result_style.display = 'none';
}
//顯示TR
function show_tr()
{
alert("show");
var result_style = document.getElementById('dyn_tr').style;
result_style.display = 'table-row';
}

</script>


以下是完整程式


<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
//隱藏TR
function hide_tr()
{
alert("hide");
var result_style = document.getElementById('dyn_tr').style;
result_style.display = 'none';
}
//顯示TR
function show_tr()
{
alert("show");
var result_style = document.getElementById('dyn_tr').style;
result_style.display = 'table-row';
}

</script>
<title>未命名 1</title>
</head>

<body>
<table border="1">
<tr><td>1111</td><td>1111</td></tr>
<tr  id="dyn_tr" style="display: none;"><td>222</td><td>222</td></tr>
<tr><td>333</td><td>333</td></tr>
</table>
<input type="button" value="Hide" onclick="hide_tr()">
<input type="button" value="Show" onclick="show_tr()">
</body>

</html>
張貼者： 於
標籤：

3 則留言:

  1. Unknown2014年5月28日 晚上11:56

    非常感謝!!!
    你這個資料幫助我不少 > <!

    回覆刪除
  2. Unknown2014年6月9日 晚上11:06

    感謝你的分享
    另，請問如333之後再多一列444也是要隱藏 要如何寫？(222跟444可以分別隱藏/顯示)

    回覆刪除
  3. 奇奇2015年7月16日 晚上8:34

    講解非常詳細

    感謝作者無私的分享～！！

    回覆刪除

訂閱： 張貼留言 (Atom)