Question

我是javascript的初学者。我有一个带有表格单元格的表单，要求用户选择以下三个选项之一：Live Audition，Mailed DVD或Internet Performance。根据他们的选择，他们应该得到一个相应的表格单元格，允许他们选择试听位置，给他们DVD地址，或者为他们的互联网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

javascript表格单元格显示适用于IE和Firefox，但不适用于Chrome和Safari

1 个答案: