通過使用Javascript如何顯示和隱藏表格的某些部分（例如：TR或TD）。這應該取決於從數據庫中獲取的數據我正在使用CakePHP框架爲我的應用程序和使用單個視圖文件進行添加和編輯。在編輯模式下 - 取決於獲取的數據，我需要顯示和隱藏表單元素的某些部分。Javascript-CSS顯示和隱藏表單元素

方案有五個問題A，B，C，d河畔ê B依賴於A，C依賴於B，d是依賴於C和E取決於d 因此，雖然加我已經隱藏B，C，D和E 關於選擇各自的問題，其他問題將被顯示。 A，B，C，D - 全部是「是/否」（單選按鈕）問題。

如：

<'table> 
<'tr id='a'> 
    <'td colspan='2'>A<'/td> 
<'/tr> 
<'tr id='b'> 
    <'td colspan='2'>B<'/td> 
<'/tr> 
<'tr id='cd'> 
    <'td id='c'>C<'/td><'td id='d'>D<'/td> 
<'/tr> 
<'/table>

（」字頭所有的HTML標籤）

我怎樣才能做到這一點。請發表您的評論。

來源

2011-05-03 user599531

感謝Richard，RobG，M.Azad對您的迅速回應。我可以理解CSS屬性以及JS如何執行相同的操作。我不確定是否正確解釋了你。如果不是原諒我。讓我試着詳細解釋一下。我的問題是我正在使用ADD和EDIT的單個頁面。添加頁面功能可以正常工作，並且可以通過上面介紹的方式實現。 – user599531 2011-05-03 07:03:21

延續.. 假設在附加功能 1.選擇以下步驟是對提問甲 2.選擇是對問題B 3.選擇沒有對問題Ç 延續.... 在編輯模式（同一頁），它應該顯示問題A，B，C並且隱藏D.但是對於每個記錄都是動態的。到目前爲止，我還沒有實現編輯模式（這是一個問題）。所以在編輯模式下，我只能看到問題「A」。現在，所有其他字段都隱藏起來，像添加頁面一樣執行。 – user599531 2011-05-03 07:03:40

延續..解決方案應該是： 1.首先，我們需要區分添加和編輯頁面。 2.如果添加。顯示和隱藏各自的字段 - 將被硬編碼 3.如果編輯，如何顯示和隱藏動態和基於數據庫記錄集的相應字段？（有幾種方法可以在我的腦海中實現，但是尋找最優化的方式，所以請把你的意見和想法）希望這有意義..... :) – user599531 2011-05-03 07:04:10

CSS有兩個特殊屬性，第一個是display，第二個是visibility。

顯示

擁有衆多的屬性或值，但我們需要的有none和block。 none就像是一個隱藏值，而block就像show一樣。如果您使用none值，您將完全隱藏您應用此CSS樣式的HTML標籤。如果您使用block，您將看到HTML標籤及其內容。

知名度

擁有衆多價值，但我們想知道更多關於hidden和visible值。 hidden將以與block值相同的方式顯示，但這會隱藏標記及其內容，但不會隱藏該標記的物理空間。

例如，如果您有幾條文本行，然後是圖像（圖片），然後是具有三列和兩行圖標和文本的表格。現在，如果將visibility CSS的hidden值應用於圖像，圖像將消失，但圖像使用的空間將保留在原來的位置。換句話說，你會在文字和表格之間留下一個很大的空間（空洞）。現在，如果您使用visible值，您的目標代碼及其元素將再次可見。

然後你就可以通過JavaScript改變他們display：

document.getElementById(id).style.display = "none"; 
document.getElementById(id).style.display = "block";

爲visibility：

document.getElementById(id).style.visibility= "hidden"; 
document.getElementById(id).style.visibility= "visible";

所以，你可以創建一個具有這樣的功能，然後引用該函數時，他們選擇正確答案。這取決於他們如何選擇它，以便如何顯示它。

否則，如果這不是你想要的innerHTML函數也可以工作。

來源

2011-05-03 05:42:10 Richard

爲了顯示，不要使用'block'由於display屬性可以有許多不同的值（特別是TR和TD在不同的瀏覽器中具有不同的默認顯示值），所以再次顯示該元素。相反，使用''（空字符串），以便它返回到其默認值或繼承值。 – RobG 2011-05-03 05:47:00

也可以工作 – Richard 2011-05-03 08:47:03

要隱藏一個元素，但在文檔流中保留其位置（即隱藏它不會導致其他元素向上移動並填充其空間），請將其屬性設置爲「隱藏」（style.visibility）。要再次顯示，請將其設置爲「可見」。

例如

var el = document.getElementById('a'); 
a.style.visibility = 'hidden'; 
a.style.visibility = 'visible';

要隱藏的元素和從所述流中除去它（即，它會如同其在文檔中沒有，其它元素將填充它的位置）設置其屬性style.display爲「none」。要再次顯示它（並導致文檔重新流動，因爲現在元素將再次佔用空間）將其設置爲「」（空字符串）。

var el = document.getElementById('a'); 
a.style.display = 'none'; 
a.style.display = '';

最後一點是非常重要的，因爲它允許返回到它的默認元素或繼承的顯示值，這可能是多個值中的任何一個（甚至可能是當它被隱藏到不同的）。

來源

2011-05-03 05:43:58 RobG

如果你可以使用jQuery很容易：("#b").css("display","none");或("#b").css("display","block");

如果你不使用jQuery看看這個quirksmode.org article。

來源

2011-05-03 05:49:07

添加到什麼M.阿扎德寫道，如果你使用jQuery，隱藏更簡單的方法/展示一些東西是用獸皮（），顯示（），或切換（），像這樣： ("#b").hide(); or ("#b").show(); or ("#b").toggle();

toggle（）會隱藏一個可見元素，或者顯示一個隱藏的元素。這些功能還具有動畫功能。你可以在這裏閱讀：

jQuery是一個了不起的圖書館。我相信許多計算器讀者都熟悉它，但對於那些不熟悉的人來說，這非常值得研究，他們的在線文檔非常棒。

來源

2011-05-11 07:36:34 yitwail

Javascript-CSS顯示和隱藏表單元素

回答

顯示

知名度

相關問題