我可以在一張桌子上一次顯示一行嗎？

我有一個JavaScript函數來切換表中的行的顯示。困境是我想一次顯示一行。什麼是一個乾淨的方式來做到這一點？我可以在一張桌子上一次顯示一行嗎？

function optionSelected() { 
     var optionSelect = document.getElementById('ddlSelect'); 
     var strTest = optionSelect.options[optionSelect.selectedIndex].value;    
     var rowHeader = document.getElementById(strTest); 
     var row = document.getElementById(strTest); 

     if (rowHeader.style.display == '') { 
      rowHeader.style.display = 'none'; 
      row.style.display = 'none'; 
     } 
     else { 
      rowHeader.style.display = ''; 
      row.style.display = ''; 
     } 
    } 


<select id="ddlSelect" onchange="optionSelected()"> 
    <option value="optionA">A</option> 
    <option value="optionB">B</option> 
    <option value="optionC">C</option> 
    <option value="optionD">D</option> 
</select> 

<table id="tableList"> 
    <tr id="optionA"><td>DisplayA</td></tr> 
    <tr id="optionB"><td>DisplayB</td></tr> 
    <tr id="optionC"><td>DisplayC</td></tr> 
    <tr id="optionD"><td>DisplayD</td></tr> 
</table>

來源

2010-03-09 MrM

我們可以看到表格中的標記，而 'ddlSelect' 字段？ – belugabob 2010-03-09 16:42:12

@ belugabob - 對不起，我失去了我的查找。 – MrM 2010-03-09 17:02:12

你能澄清你的問題嗎？您發佈的內容似乎可以滿足您的需求：根據用戶的選擇一次顯示一行 – Dancrumb 2010-03-09 17:03:31

簡單的jQuery

$('tr').hide(); 
$('#'+strTest).show();

來源

2010-03-09 21:09:28

第一條語句隱藏文檔中的所有表格行。第二個將顯示由'id'屬性標識的特定行。 – Omar 2010-03-09 21:11:34

這是您的香草JavaScript解決方案（雖然我寧願用jQuery去）：

function optionSelected() { 
    var sel = document.getElementById('ddlSelect'); 

    for (var i=0; i<sel.options.length; i++) { 
     document.getElementById(sel.options[i].value) 
      .style.display = sel.options[i].selected ? '' : 'none'; 
    } 
}

另外，如果你想初始化顯示，應在onLoad處理函數調用一次optionSelected() 。

來源

2010-03-09 17:11:50

您可以改變樣式規則並改爲使用CSS選擇器的速度，而不是在DOM節點上循環。

以下是一次顯示一行並停留的示例。
如果您想在每次選擇時刪除它們，則可以在每次進行選擇時清除樣式。

<body> 
    <style id="styles"> 
     table tr{ 
      display:none; 
     } 
    </style> 
    <select id="ddlSelect" onchange="optionSelected()"> 
     <option value="optionA">A</option> 
     <option value="optionB">B</option> 
     <option value="optionC">C</option> 
     <option value="optionD">D</option> 
    </select> 

    <table> 
     <tr id="optionA"><td>DisplayA</td></tr> 
     <tr id="optionB"><td>DisplayB</td></tr> 
     <tr id="optionC"><td>DisplayC</td></tr> 
     <tr id="optionD"><td>DisplayD</td></tr> 
    </table> 
    <script> 
     function optionSelected() { 
      var optionSelect = document.getElementById('ddlSelect'), 
        styles = document.getElementById('styles'), 
        selector = '#' + optionSelect.options[optionSelect.selectedIndex].value, 
        rule = 'display:block'; 
        if(styles.styleSheet){ 
         styles.styleSheet.cssText = selector + '{' + rule + '}'; 
        }else{ 
         styles.appendChild(document.createTextNode(selector + '{' + rule + '}')); 
        } 
     } 
    </script> 
</body>

來源

2010-03-09 17:29:23 Mic

有趣的動態操作樣式表 - 不知道我會這樣做，因爲效果可能太過全球化。我寧願將隱藏/顯示操作應用於要顯示或隱藏的特定元素。我想，所有的事情都是有趣的。 – belugabob 2010-03-10 08:56:14

我可以在一張桌子上一次顯示一行嗎？

回答

相關問題