javascript 表格单元格显示在 IE 和 Firefox 中有效，但在 Chrome 和 Safari 中无效

Question

我是 JavaScript 的初学者。我有一个带有表格单元格的表格，要求用户选择以下三个选项之一:现场试演、邮寄 DVD 或互联网表演。根据他们的选择，他们应该得到一个相应的表格单元格，允许他们选择试听位置，为他们提供 DVD 地址，或为他们的 Internet URL 提供文本输入字段。我的代码适用于 Firefox 和 IE，但不适用于 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>

我做错了什么？？

Answer 1

好吧，因为我愚蠢的声誉不够高，我无法对您的原始问题添加评论。因此，我不能简单地让你多贴一些原代码。希望您已经找到问题的答案，因为它已在一段时间前发布。

顺便说一句，您拥有 Javascript 的方式有一些冗余。首先，如果你想在 html 页面上包含你的 javascript，那么你只需要像这样使用一个脚本标签:

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

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

您不需要为每个函数单独重复标签。记得使用 DRY 方法，尽量不要重复自己。此外，大多数开发人员喜欢将 javascript 放入其自己的文件中，然后使用脚本标签简单地导入文件。

现在，我目前看到的主要内容是 display: none, border: hidden 是您的问题，而且我只是快速浏览了一下，因为我工作很忙。由于您使用的是逗号而不是分号，因此浏览器不确定如何处理。所以将其更改为 display: none; border: hidden; 查看 jsfiddle