動態的顯示或隱藏Table的Tr
出處: http://trufflepenne.blogspot.tw/2013/05/tabletr.html
如果我們要把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>