Question

我有几张桌子的内容应该根据点击某些按钮（在这种情况下是链接）而改变。我在其他地方成功使用过这个Javascript代码，但在switchid（）函数中只有一个参数（只有一个表可以搞乱）。我一直在研究这个例子，我似乎正确地传递了变量，所以我做错了什么？此代码不适用于Chrome或IE：

编辑：根据评论，我能够将我的javascript部分缩小为一个更小的函数，它应该做同样的事情。我在下面做了改动。但它仍然不起作用。

我还将“数组”和“x”变量更改为“JonArray”和“JonX”，以避免其中任何一个成为保留字的机会。

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">

            var topTable = new Array('English','Spanish');
            var bottomTable = new Array('Japanese','Italian');

            function switchid(JonArray,JonX) {
                for(var i=0;i<JonArray.length();i++) {
                    document.getElementById(JonX).style.display='none';
                }
                document.getElementById(JonX).style.display='table-row-group';
            }

        </script>
        <table border='1'>
            <thead>
                <tr><td>Odds</td><td>Evens</td></tr>
            </thead>
            <tfoot>
                <tr><td><a href="javascript:switchid('topTable','English')">English</a></td><td><a href="javascript:switchid('topTable','Spanish')">Spanish</a></td></tr>
            </tfoot>
            <tbody id='English'>
                <tr><td>One</td><td>Two</td></tr>
                <tr><td>Three</td><td>Four</td></tr>
            </tbody>
            <tbody id='Spanish' style="display:none;">
                <tr><td>Uno</td><td>Dos</td></tr>
                <tr><td>Tres</td><td>Quatro</td></tr>
            </tbody>
        </table>
        <br />
        <table border='1'>
            <thead>
                <tr><td>Odds</td><td>Evens</td></tr>
            </thead>
            <tfoot>
                <tr><td><a href="javascript:switchid('bottomTable','Japanese')">Japanese</a></td><td><a href="javascript:switchid('bottomTable','Italian')">Italian</a></td></tr>
            </tfoot>
            <tbody id='Japanese'>
                <tr><td>Ichi</td><td>Ni</td></tr>
                <tr><td>San</td><td>Shi</td></tr>
            </tbody>
            <tbody id='Italian' style="display:none;">
                <tr><td>Un</td><td>Due</td></tr>
                <tr><td>Tre</td><td>Quattro</td></tr>
            </tbody>
        </table>
    </body>
</html>

Answer 1

http://jsfiddle.net/92ZPM/1/

我确保函数和变量可用，无论它们何时被创建。

我还为您的变量提供了描述性名称，清理并将表数据存储在单个对象中。

<强>的JavaScript

window.switchid = function (table, language) {
    var tables = {
        'top': ['English', 'Spanish'],
        'bottom': ['Japanese', 'Italian']
    };
    for (var i = 0; i < tables[table].length; i++) {
        document.getElementById(tables[table][i]).style.display = 'none';
    }
    document.getElementById(language).style.display =
        'table-row-group';
}

<强> HTML

<table border='1'>
    <thead>
        <tr>
            <td>Odds</td>
            <td>Evens</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><a href="javascript:switchid('top','English');">English</a>
            </td>
            <td><a href="javascript:switchid('top','Spanish')">Spanish</a>
            </td>
        </tr>
    </tfoot>
    <tbody id='English'>
        <tr>
            <td>One</td>
            <td>Two</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Four</td>
        </tr>
    </tbody>
    <tbody id='Spanish' style="display:none;">
        <tr>
            <td>Uno</td>
            <td>Dos</td>
        </tr>
        <tr>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
    </tbody>
</table>
<br />
<table border='1'>
    <thead>
        <tr>
            <td>Odds</td>
            <td>Evens</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><a href="javascript:switchid('bottom','Japanese')">Japanese</a>
            </td>
            <td><a href="javascript:switchid('bottom','Italian')">Italian</a>
            </td>
        </tr>
    </tfoot>
    <tbody id='Japanese'>
        <tr>
            <td>Ichi</td>
            <td>Ni</td>
        </tr>
        <tr>
            <td>San</td>
            <td>Shi</td>
        </tr>
    </tbody>
    <tbody id='Italian' style="display:none;">
        <tr>
            <td>Un</td>
            <td>Due</td>
        </tr>
        <tr>
            <td>Tre</td>
            <td>Quattro</td>
        </tr>
    </tbody>
</table>

Answer 2

你必须稍微改变你的javascript：

        var tables=new Array();
        tables['topTable'] = new Array('English','Spanish');
        tables['bottomTable'] = new Array('Japanese','Italian');

        function switchid(JonArray,JonX) {
            //alert(JonArray);
            var tmptable=tables[JonArray];
            for(var i=0;i < tmptable.length;i++) {
                document.getElementById(tmptable[i]).style.display='none';
            }
            document.getElementById(JonX).style.display='';
        }

Answer 3

其中一些答案有效，但我刚刚通过Chrome DevTools发现 REAL 答案！在我的'for'循环中，我使用'length（）'而不是'length'!!!

Answer 4

为什么不使用CSS而不是循环ID？

JSFiddle

HTML

<table border='1' class="English">
    <thead>
        <tr><td>Odds</td><td>Evens</td></tr>
    </thead>
    <tfoot>
        <tr><td onclick="changeLang(this,'English')">English</td><td onclick="changeLang(this,'Spanish')">Spanish</td></tr>
    </tfoot>
    <tbody id='English'>
        <tr><td>One</td><td>Two</td></tr>
        <tr><td>Three</td><td>Four</td></tr>
    </tbody>
    <tbody id='Spanish'>
        <tr><td>Uno</td><td>Dos</td></tr>
        <tr><td>Tres</td><td>Quatro</td></tr>
    </tbody>
</table>

CSS

tbody {
    display: none;
}

.English #English, .Spanish #Spanish, .Japanese #Japanese, .Italian #Italian {
    display: table-row-group;
}

JS

function changeLang(cell, lang) {
    cell.parentNode.parentNode.parentNode.className = lang;
}

Javascript交换无法正常工作

4 个答案: