Question

我想知道是否有人可以帮我解决问题;

如果有以下脚本：

<script type="text/javascript">
function show_table(id){
  document.getElementById('table1').style.display='none';
  document.getElementById('table2').style.display='none';
  document.getElementById('table3').style.display='none';
  document.getElementById('table4').style.display='none';
  document.getElementById('table6').style.display='none';
  document.getElementById('table'+id).style.display='block';
}
</script>

它显示我的表格很好，但现在我想使用命令同时打开两个表，所以只需点击下面的参考链接;

<a href="#" onclick="show_table(6)">Table6</a>

是否可以使用双onclick =“”命令？我想打开示例表（6）和表（2）。我该怎么写？顺便说一句，我只能使用javascript，没有PHP。

我尝试过这样的事情，但是没有做到这一点

<a href="#" onclick="show_table(6),show_table(2)">Table6 and Table2</a>

Answer 1

试试这个版本，可以使用数字或数组：

function show_table(id) {
    var ix;

    for (ix = 1;  ix <= 6;  ++ix) {
        document.getElementById('table' + ix).style.display='none';
    }
    if (typeof id === "number") {
        document.getElementById('table'+id).style.display='block';
    } else if (id && id.length) {
        for (ix = 0;  ix < id.length;  ++ix) {
            document.getElementById('table'+ix).style.display='block';
        }
    }
}

然后你可以说show_table（[1,2]）而不仅仅是show_table（1）。

Answer 2

    function show_table(ids) {
        var idArr = ids.split(",");
        document.getElementById('table1').style.display='none';
      document.getElementById('table2').style.display='none';
      document.getElementById('table3').style.display='none';
      document.getElementById('table4').style.display='none';
      document.getElementById('table6').style.display='none';

        for(var i = 0; i< idArr.length; i++) {
            document.getElementById('table'+idArr[i]).style.display='block';
        }
    }

<a href="#" onclick="show_table('6,2')">

Answer 3

如果你喜欢最小的力量，请试试这个：

function hide_all_tables(){
    document.getElementById('table1').style.display='none';
    document.getElementById('table2').style.display='none';
    document.getElementById('table3').style.display='none';
    document.getElementById('table4').style.display='none';
    document.getElementById('table6').style.display='none';
}

function show_table(id){
    document.getElementById('table'+id).style.display='block';
}

然后以这种方式使用代码：

<a href="#" onclick="hide_all_tables();show_table(6);show_table(2);">Table6 and Table2</a>

Answer 4

我从来没有使用过'双重onclick命令'，说实话，不要认为它们有效，或者是好的做法。为什么不在javascript函数中同时显示两个show table命令并调用函数onclick？

如果我正确理解你。

Answer 5

如果表格具有逻辑关联（它们必须，对吗？），可以一次更改它们而不进行循环。

我们的想法是为他们分配一个类（或多个类）并立即更改整个类：

<script>
function f(classname, show)
{
    var mysheet=document.styleSheets[0];

    /* Each class in the styleSheet is called a 'rule' */
    var myrules=mysheet.cssRules;

    var value = show ? '' : 'none'; /* show or hide? */
    for (i=0; i<myrules.length; i++){

        /* find the class we want to change */
        if(myrules[i].selectorText==classname){
            /* change the rule */
            myrules[i].style.display = value;
        }
    }
}
</script>

<style type="text/css" >
.hasPets { color: green; display: none; }
.hasCats { font-weight: bold; display: none; }
</style>

<button onclick="f('.hasPets', true)">Show Pets</button>
<button onclick="f('.hasCats', true)">Show Cats</button>
<button onclick="f('.hasPets', false)">Hide Pets</button>
<button onclick="f('.hasCats', false)">Hide Cats</button>

<div class="hasPets">Pets</div>
<div class="hasCats hasPets">Cats</div>

在此示例中，Show Pets显示两者，Hide Cats仅隐藏Cats。你不能只展示Cats - Pets会覆盖它。

注意：为了清晰起见，我保留了这个简短的内容。在实践中，您将不得不添加更多行，因为并非所有版本的IE都支持.cssRules property，我认为他们称之为.rules。

Answer 6

此功能允许显示任意数量的表。

function show_table(){
    for(var i = 1; i  < 7; i++) // change 7 to the amount of tables 
        if(document.getElementById('table'+i))
            document.getElementById('table'+i).style.display='none';

    for (var i = 0; i < arguments.length; i++)
        if(document.getElementById('table'+arguments[i]))
            document.getElementById('table'+arguments[i]).style.display='block';
}

要显示包含table3和table5 ID的表格，请：

show_table(3,5);

显示隐藏多个表格

6 个答案: