javascript表格单元格显示在IE和Firefox中可用，但在Chrome和Safari中不可用

我是JavaScript的初学者。我有一个表格单元格，要求用户选择以下三种选项之一：Live Audition，邮寄的DVD或互联网性能。根据他们的选择，他们应该得到一个相应的表格单元格，以便他们选择一个试听位置，给他们DVD地址，或者为他们的互联网URL提供一个文本输入字段。我的代码适用于Firefox和IE，但不适用于Chrome和Safari。javascript表格单元格显示在IE和Firefox中可用，但在Chrome和Safari中不可用

这里的表单代码：

<tr> 
<td class="form">Audition Type*<br /><select class="input" name="AuditionType"> 
<option value="">Select One</option> 
<option onclick="makeLive()" value="Live">Live Audition</option> 
<option onclick="makeMail()" value="Mail">Mailed DVD</option> 
<option onclick="makeURL()" value="Internet">Internet Performance</option> 
</select> 
</td> 

<td class="form" id="live" colspan="2" style="display:block, border:hidden" >Audition Location*<br /><select class="input" name="AuditionLocation"> 
<option value="">Select One</option> 
<option value="Princeton">Princeton</option> 
<option value="East Hanover">East Hanover</option> 
</select> 
</td> 

<td class="form" id="url" colspan="2" style="display:none" >Internet Performance URL*<br /> 
<em>e.g. http://www.youtube.com/your_video</em><br /><input type="text" class="input" name="AuditionURL" 
maxlength="75" size="50" value="" /></td> 

<td class="form" id="mail" colspan="2" style="display:none" >Mail DVD to: Golden Key Festival<br /> 
81 Five Points Road<br /> 
Colts Neck, NJ 07722</td> 
</tr>

这里是JavaScript的：

<script type="text/javascript"> 
function makeLive() { 
document.getElementById('live').style.display="table-cell"; 
document.getElementById("mail").style.display="none"; 
document.getElementById("url").style.display="none"; 
} 
</script> 

<script type="text/javascript"> 
function makeMail() { 
document.getElementById("mail").style.display="table-cell"; 
document.getElementById("live").style.display="none"; 
document.getElementById("url").style.display="none"; 
} 
</script> 

<script type="text/javascript"> 
function makeURL() { 
document.getElementById("url").style.display="table-cell"; 
document.getElementById("live").style.display="none"; 
document.getElementById("mail").style.display="none"; 
} 
</script>

我在做什么错？

来源

2014-02-05 Jim Sherry

好吧，因为我的愚蠢声望不够高，我无法给您的原始问题添加评论。因此，我不能简单地要求你粘贴更多的原始代码。希望你已经发现了你的问题的答案，不过正如之前发布的那样。

顺便说一句，你有你的Javascript的方式有一些冗余。首先，如果你希望在你的HTML页面上的JavaScript关闭，那么你只需要使用一个script标签，像这样：

<script type="text/javascript"> 
    function myFirstFunction(){ 
    .... 
    } 

    function mySecondFunction(){ 
    .... 
    } 
</script>

你不需要单独重复标签为每个功能。请记住使用DRY方法并尽量不要重复自己。另外大多数开发人员喜欢将JavaScript放入其自己的文件中，然后使用脚本标记简单地导入文件。

现在我最近看到的主要事情是，因为我工作繁忙，所以我只是快速浏览一下，因为display: none, border: hidden是您的问题。由于您使用逗号而不是分号，因此浏览器不确定如何处理此问题。所以改为display: none; border: hidden;退房jsfiddle

来源

2014-09-10 18:15:23 QuietOmen

javascript表格单元格显示在IE和Firefox中可用，但在Chrome和Safari中不可用

回答

相关问题