Javascript<；t车身>；交换不起作用_Javascript_Html

Javascript<；t车身>；交换不起作用

javascript html

Javascript<；t车身>；交换不起作用,javascript,html,Javascript,Html,我有两个表，它们的内容应该根据单击某些按钮（在本例中为链接）进行更改。我在其他地方成功地使用了这段Javascript代码，尽管switchid（）函数中只有一个参数（只有一个表需要处理）。我一直在研究这方面的例子，我似乎正确地传递了变量，那么我做错了什么？此代码在Chrome或IE上不起作用： Edit：根据这些评论，我可以将javascript部分缩减为一个更小的函数，这应该可以做同样的事情。我已经做了以下更改。但它仍然不起作用。我还将“array”和“x”变量更改为“JonArray”和

我有两个表，它们的内容应该根据单击某些按钮（在本例中为链接）进行更改。我在其他地方成功地使用了这段Javascript代码，尽管switchid（）函数中只有一个参数（只有一个表需要处理）。我一直在研究这方面的例子，我似乎正确地传递了变量，那么我做错了什么？此代码在Chrome或IE上不起作用：

Edit：根据这些评论，我可以将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>


var topTable=新数组（'English'，'西班牙语'）；
var bottomTable=新数组（“日语”、“意大利语”）；
函数开关ID（JonArray，JonX）{
对于（var i=0；i为什么不使用CSS而不是通过ID循环

HTML
JS
您必须稍微更改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='';
        }

var tables=new Array（）；
tables['topTable']=新数组（'English'，'Spanish'）；
tables['bottomTable']=新数组（'Japanese'，'意大利语'）；
函数开关ID（JonArray，JonX）{
//警报（JonArray）；
var tmptable=表[JonArray]；
对于（变量i=0；i

我确保函数和变量在创建时都可用
我还为变量提供了描述性名称，将表数据清理并存储在单个对象中
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';
}

window.switchid=函数（表，语言）{
变量表={
“top”：[“英语”、“西班牙语”]，
“底部”：[“日语”、“意大利语”]
};
对于（var i=0；i<表[table]。长度；i++）{
document.getElementById（tables[table][i]）.style.display='none'；
}
document.getElementById（语言）.style.display=
“表行组”；
}

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>


可能性
埃文斯
一个
两个
三
四
联合国组织
磁盘操作系统
特雷斯
四重奏


可能性
埃文斯
一
镍
存储区域网络
施
联合国
应得的
特雷
夸特罗
这些答案中有一些是有效的，但我只是通过Chrome DevTools捕捉到了真实的答案！在我的'for'循环中，我使用了'length（）'而不是'length'！！！
（我应该将这篇文章命名为“tFready Friday”（t Body swapping…明白了吗？）将int I=0；
转换为var I=0；
在循环中
。还有文档。所有都是IE独有的东西，尽管它不像jQuery…FWIW那样工作，文档。getElementById
一直是标准。您可以摆脱所有文档。所有和文档。层填充无需保留文档。层和文档。所有分支在2013.AFAIK的代码中，没有任何浏览器能够理解显示：表行组
，但不能理解文档.getElementById
。此外，这些分支写得不正确（而不是.id
应该有[x]
）谢谢Ilya和Jeffman…Teemu，我不知道你在说什么关于我的循环…？因为没有人要求CSS。但是你已经使用了CSSdisplay
属性。为什么不以一种更方便的方式使用它呢？它甚至对我不起作用；表中没有显示任何内容。小提琴可以工作，但我本地机器上IIS上托管的页面可以看到通过Chrome和IE不起作用。我当时可能做错了什么。我相对于您最初的代码稍微更改了HTML，从tbody
中删除了style
，但在表中添加了class。这看起来不错，但对我来说不起作用。逻辑看起来很合理，我只是不确定它为什么不起作用g、 现在，当我单击其中一种语言时，确实会收到警告，因此该函数会运行。请将for循环中的行更改为document.getElementById（tmptable[I]）.style.display='none'；这将隐藏两个tbody，那么最后一行将是document.getElementById（JonX）.style.display=''；我用注释注释编辑了switch id函数，希望这能帮上忙！而且我不必通过将JS中的“top”和“bottom”名称更改为“topTable”和“bottomTable”来更改任何现有HTML
        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='';
        }

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

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