我可以在一张桌子上一次显示一行吗？

我有一个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

我可以在一张桌子上一次显示一行吗？

回答

相关问题