-1

我有几个表格，其内容应根据单击某些按钮（在本例中为链接）而改变。我已经成功地在其他地方使用了这个 Javascript 代码，尽管 switchid() 函数中只有一个参数（只有一个表可以处理）。我一直在研究这方面的例子，我似乎正确地传递了变量，所以我做错了什么？此代码不适用于 Chrome 或 IE：

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

我还将“array”和“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>
4

4 回答 4

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>
于 2013-07-31T19:59:00.360 回答
0

你必须稍微改变你的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='';
        }
于 2013-07-31T19:43:04.833 回答
-1

其中一些答案有效，但我刚刚通过 Chrome DevTools获得了真正的答案！在我的“for”循环中，我使用的是“length()”而不是“length”！！！

于 2013-07-31T20:59:32.987 回答
-2

为什么不使用 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;
}
于 2013-07-31T19:38:37.463 回答