2

我想知道是否有人可以通过命令帮助我；

如果有以下脚本：

<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>
4

6 回答 6

2

试试这个版本，它可以接受一个数字或一个数组：

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)。

于 2012-09-13T16:07:17.020 回答
1 
    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')">
于 2012-09-13T16:07:30.627 回答
1

如果您更喜欢最小力方法，请尝试以下操作：

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>
于 2012-09-13T18:31:38.423 回答
0

我从来没有使用过“双击命令”，老实说，我认为它们不起作用，或者是好的做法。你为什么不把两个显示表命令都放在一个 javascript 函数中并调用该函数 onclick 呢？

如果我正确理解你。

于 2012-09-13T16:06:46.933 回答
0

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

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

<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>

​&lt;button onclick="f('.hasPets', true)">Show Pets</button>
​&lt;button onclick="f('.hasCats', true)">Show Cats</button>
​&lt;button onclick="f('.hasPets', false)">Hide Pets</button>
​&lt;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。

于 2012-09-13T17:17:08.167 回答
-2

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

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';
}

要显示 ID 为的表，table3然后table5：

show_table(3,5);
于 2012-09-17T15:28:33.267 回答