當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實(shí)現(xiàn)表格中隱藏下級(jí)表格

JS代碼實(shí)現(xiàn)表格中隱藏下級(jí)表格

2012/10/30 15:54:32作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼實(shí)現(xiàn)表格中隱藏下級(jí)表格

【實(shí)例描述】

div層可以實(shí)現(xiàn)表單隱藏，但對(duì)于多個(gè)表單，使用表格隱藏手段反而更簡(jiǎn)單。本例學(xué)習(xí)如何使用表格隱藏。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無憂（www.wangbatian.cn）</title>
</head>
<body>
<style type="text/css">
.color1 { color:#000080; cursor:hand;font-weight: bold; }
.color2 { color:#464646; display:none; }
</style>
<table onclick="divClick(this);">
<tr class="color1"><td>1、在工作流不同階段，加載不同的表單？</td></tr>
<tr class="color2"><td>
　　　　我現(xiàn)在已經(jīng)把自定義表單實(shí)現(xiàn)了，加WWF以后，要做的東西就不多了<br>
　　　　離可以作為工作流使用還有相當(dāng)?shù)拈_發(fā)工作量的</td></tr>
<tr class="color1"><td>2、為什么一定要先交預(yù)付款？</td></tr>
<tr class="color2"><td>
　　請(qǐng)問這個(gè)是text/x-scriptlet 這是個(gè)什么東東插件搜索服務(wù)顯示是未知插件. . 金箭. 
<br>
　　哪位有的下載啊我弄了半天也沒弄好請(qǐng)高人幫幫忙啊~~謝謝`~~<br>
　　款中扣除相應(yīng)費(fèi)用。同時(shí)，為保證您的用戶購(gòu)買域名、虛擬主機(jī)、
FTP空間、數(shù)據(jù)庫(kù)、企業(yè)郵局能實(shí)時(shí)開<br>
　　2007年1月17日1:26 PM. 似乎是個(gè)IE下用的控件 。</td></tr>
<tr class="color1"><td>3、為什么我司的域名比較便宜？</td></tr>
<tr class="color2"><td>
　　　審核就把delete from SMT_cp where SMT_id in(1,2,3)
換成 update  SMT_cp set 審核字段=1 where SMT_id in(1,2,3)就可以<br>
　　SQL語(yǔ)句可以直接delete from SMT_cp where SMT_id in(1,2,3)刪除</td></tr>
</table>
<SCRIPT language="javascript">
function divClick(tb)
{
 var n = event.srcElement.parentNode.rowIndex;              
//獲得父節(jié)點(diǎn)的行索引
 if (n%2==0)                                                
//判斷是否是被2整除的行-所有標(biāo)題行都可以                                         
 {
  with(tb.rows[n+1].style) display= display=="none" ? "block" : "none";
//讓標(biāo)題行的下一行顯示
 }
}
</SCRIPT>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例中使用兩種樣式定義表格的標(biāo)題行和內(nèi)容行.當(dāng)用戶單擊表格時(shí)，程序會(huì)通過“n%2==o”判斷用戶選擇的行，如果能被2整除，說明用戶單擊的是標(biāo)題行。當(dāng)單擊標(biāo)題行時(shí)，使用表格的“display”屬性控制內(nèi)容行的顯示。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：表格中隱藏下級(jí)表格 進(jìn)行本實(shí)例源碼下載