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中不可用

回答

相關問題