在展開和摺疊表格時默認隱藏行

我是一個非常新手的用戶，我很難找到關於創建html表格的信息，這些表格在默認隱藏父行顯示和子行時展開和摺疊。我已經設法使用一些我發現在線搜索的腳本來工作，但默認顯示子行。我沒有JQuery的知識，如果不需要，我寧願不添加其他語言。我對JavaScript的知識是非常基礎的，從我在網上找到的東西中學到了自我教育。我對CSS和HTML的知識很體面，但遠非完美。在展開和摺疊表格時默認隱藏行

以下是我有：

function \t toggle_visibility(tbid,lnkid) { 
 
\t \t if (document.getElementsByTagName) { 
 
    \t \t var tables = document.getElementsByTagName('table'); 
 
    \t \t \t for (var i = 0; i < tables.length; i++) { 
 
    \t \t \t \t if (tables[i].id == tbid){ 
 
     \t \t \t \t \t var trs = tables[i].getElementsByTagName('tr'); 
 
     \t \t \t \t \t for (var j = 2; j < trs.length; j+=1) { 
 
     \t \t \t \t \t \t trs[j].bgcolor = '#CCCCCC'; 
 
     \t \t \t \t \t \t if(trs[j].style.display == 'none') 
 
      \t \t \t \t \t trs[j].style.display = ''; 
 
     \t \t \t \t \t \t else 
 
      \t \t \t \t \t trs[j].style.display = 'none'; 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } 
 
    \t \t \t } 
 
    \t \t } 
 
    \t \t var x = document.getElementById(lnkid); 
 
    \t \t if (x.innerHTML == '[-] ') 
 
     \t \t x.innerHTML = '[+] '; 
 
    \t \t else 
 
     \t \t x.innerHTML = '[-] '; 
 
\t \t }

a { 
 
\t color: #ff0000; 
 
} 
 
#exco { 
 
\t color: #ff0000; 
 
\t text-decoration: none; 
 
} 
 
#tbl3RD { 
 
\t width: 100%; 
 
\t border: 1px solid #ff0000; 
 
\t border-bottom-width: 0px; 
 
\t cellspacing: 0px; 
 
\t border-spacing: 0px; 
 
} 
 
#dark { 
 
\t background-color: #242424; 
 
} 
 
#light { 
 
\t background-color: #8C8C8C; 
 
} 
 
#td75 { 
 
\t width: 75%; 
 
} 
 
#td25 { 
 
\t width: 25%; 
 
} 
 
#title { 
 
\t font-size: 110%; 
 
\t color: #FFFFFF; 
 
\t font-weight: bold; 
 
} 
 
#subtitle { 
 
\t color: #242424; 
 
\t font-weight: bold; 
 
}

<table id="tbl3RD" name="tbl3RD"> 
 
\t \t <tr id="dark"> 
 
\t \t \t <td colspan="2"></td> 
 
\t \t </tr> 
 
\t \t <tr id="dark"> 
 
\t \t \t <td id="title"> 
 
\t \t \t \t Title of the table. 
 
\t \t \t </td> 
 
\t \t \t <td id="td75"> 
 
\t \t \t \t <a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');"> 
 
\t \t \t \t \t <div align="right" id="lnk3RD" name="lnk3RD">[-] </div> 
 
\t \t \t \t </a> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="light"> 
 
\t \t \t <td id="subtitle" colspan="2"> 
 
\t \t \t \t Subtitle row that explains the content. 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t </td> 
 
\t \t \t <td id="td75"> 
 
\t \t \t \t Main content of the table. 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table>

如果有人可以幫助我弄清楚如何有字幕，默認情況下，我會永遠感激你隱藏的主要內容行。

謝謝。

來源

2015-04-02 13rennon

最後的結果，我試圖將有大約15個表彼此頂部創建級聯行（排序），擴大和崩潰。我設法讓它與body標籤中的onload一起工作，但遇到了一些問題讓它能夠同時使用多個功能。我通過爲每個表的相應功能這樣一個新的父功能解決了這個問題：

<!-- 
 
function \t toggle_visibility(tbid,lnkid) { 
 
\t \t if (document.getElementsByTagName) { 
 
    \t \t var tables = document.getElementsByTagName('table'); 
 
    \t \t \t for (var i = 0; i < tables.length; i++) { 
 
    \t \t \t \t if (tables[i].id == tbid){ 
 
     \t \t \t \t \t var trs = tables[i].getElementsByTagName('tr'); 
 
     \t \t \t \t \t for (var j = 2; j < trs.length; j+=1) { 
 
     \t \t \t \t \t \t trs[j].bgcolor = '#CCCCCC'; 
 
     \t \t \t \t \t \t if(trs[j].style.display == 'none') 
 
      \t \t \t \t \t trs[j].style.display = ''; 
 
     \t \t \t \t \t \t else 
 
      \t \t \t \t \t trs[j].style.display = 'none'; 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } 
 
    \t \t \t } 
 
    \t \t } 
 
    \t \t var x = document.getElementById(lnkid); 
 
    \t \t if (x.innerHTML == '[-] ') 
 
     \t \t x.innerHTML = '[+] '; 
 
    \t \t else 
 
     \t \t x.innerHTML = '[-] '; 
 
\t \t } 
 

 
function \t start() { 
 
\t \t \t toggle_visibility('tbl3RD','lnk3RD'); 
 
\t \t \t toggle_visibility('tblW8','lnkW8'); 
 
} 
 
//-->

a { 
 
\t color: #ff0000; 
 
} 
 
#exco { 
 
\t color: #ff0000; 
 
\t text-decoration: none; 
 
} 
 
#tbl3RD, #tblW8 { 
 
\t width: 100%; 
 
\t border: 1px solid #ff0000; 
 
\t border-bottom-width: 0px; 
 
\t cellspacing: 0px; 
 
\t border-spacing: 0px; 
 
} 
 
#dark { 
 
\t background-color: #242424; 
 
} 
 
#light { 
 
\t background-color: #8C8C8C; 
 
} 
 
#td75 { 
 
\t width: 75%; 
 
} 
 
#td25 { 
 
\t width: 25%; 
 
} 
 
#title { 
 
\t font-size: 110%; 
 
\t color: #FFFFFF; 
 
\t font-weight: bold; 
 
} 
 
#subtitle { 
 
\t color: #242424; 
 
\t font-weight: bold; 
 
}

<html> 
 
<head> 
 
<title>Test</title> 
 
<link rel="stylesheet" type="text/css" href="test.css"> 
 
<script src="test.js"></script> 
 
</head> 
 
<body onload="start();"> 
 
<table id="tbl3RD" name="tbl3RD"> 
 
\t <tr id="dark"> 
 
\t \t <td colspan="2"></td> 
 
\t </tr> 
 
\t <tr id="dark"> 
 
\t \t <td id="title"> 
 
\t \t \t Title of the table. 
 
\t \t </td> 
 
\t \t <td id="td75"> 
 
\t \t \t <a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');"> 
 
\t \t \t \t <div align="right" id="lnk3RD" name="lnk3RD">[-] </div> 
 
\t \t \t </a> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="light"> 
 
\t \t <td id="subtitle" colspan="2"> 
 
\t \t \t Subtitle row that explains the content. 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td id="td75"> 
 
\t \t \t Main content of the table. 
 
\t \t </td> 
 
\t </tr> 
 
</table> 
 
<table id="tblW8" name="tblW8"> 
 
\t <tr id="dark"> 
 
\t \t <td colspan="2"></td> 
 
\t </tr> 
 
\t <tr id="dark"> 
 
\t \t <td id="title"> 
 
\t \t \t Title of the table. 
 
\t \t </td> 
 
\t \t <td id="td75"> 
 
\t \t \t <a id="exco" href="javascript:toggle_visibility('tblW8','lnkW8');"> 
 
\t \t \t \t <div align="right" id="lnkW8" name="lnkW8">[-] </div> 
 
\t \t \t </a> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="light"> 
 
\t \t <td id="subtitle" colspan="2"> 
 
\t \t \t Subtitle row that explains the content. 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td id="td75"> 
 
\t \t \t Main content of the table. 
 
\t \t </td> 
 
\t </tr> 
 
</table> 
 
</body> 
 
</html>

來源

2015-04-03 06:05:04 13rennon

隱藏元素的一種方法是將display屬性設置爲none。您的腳本稍後仍可以更改顯示屬性。試試這個：

#td75, #subtitle { 
    display: none; 
}

作爲一個側面說明，我建議改變你的表格元素爲div。 Div比較容易操作，並且可以輕鬆用於創建響應表。

來源

2015-04-02 03:52:04 UndoingTech

我以前嘗試這樣做，內容其實隱藏負載，但使用的展開按鈕[後+]它不顯示隱藏的行。 – 13rennon 2015-04-03 04:36:28

有沒有辦法讓腳本在頁面加載時運行？我試過使用window.onload，但似乎無法使其工作？ – 13rennon 2015-04-03 05:03:53

在展開和摺疊表格時默認隱藏行

回答

相關問題