將元素追加到元素

昨天我問了一個問題（Button That When Clicked Will Display Hidden Column in HTML Table）。這個名字是不言而喻的，然而，在嘗試新事物幾小時後，我決定研究一種不同的方法。以下是想出了：將元素追加到元素

一個按鈕，點擊後一個新類追加到元素
通過這樣做的時候，我們將在CSS

我有以下HTML元素：

echo "<td class =\"development\" id = 'tag$i'>test1</th>"; 
echo "<td class =\"development\" id = 'tag$i'>test2</th>"; 
echo "<td class =\"development\" id = 'tag$i'>test3</th>";

$ i是行號，以便畫面中的每個這些<td>的被包裹一個for循環內以創建一個列。

用CSS：

.development{ 
    text-align:center; 
    padding-left:10px; 
    display:block; 
} 

.hide{ 
    display:none; 
}

因此，這是我需要你的幫助。我提出了一個按鈕，點擊後會運行一個JavaScript函數，它可以將'.hide'類附加到td標籤。

<button onclick="addCss()">Click me</button>

我不知道如何編寫JavaScript，如果我需要傳遞任何參數，如ID的爲<td>標籤。後的第一個「爲附加類名是重要的空間：

來源

2016-03-03 anderish

document.getElementById('yourId').className += ' ClassName' 

//To select elements by class name. 
document.getElementsByClassName('yourId')

注意。

爲什麼？：如果您的班級名稱爲「class1」並附加了「class2」 - 它將導致「class1class2」

通過添加空格，它將導致「class1 class2」並被識別爲兩個單獨的類。

<button onclick="document.getElementById('yourId').className += ' ClassName';">Click me</button>

如果你想做出更好的解決方案。

<script> 

function addCss(element) { 
document.getElementById(element).className += ' ClassName'; 
} 

</script>

然後，只需調用函數像你這樣原本。您甚至可以爲類名稱本身添加一個參數。

來源

2016-03-03 16:28:01 Son

看起來像這種方法只允許我追加隱藏類只有一個''標籤 – anderish

@ user3272303每個是否有相同的ID？我假設id ='tag $ i'每次遞增，因此應用不同的ID。 – Son

是的不同的ID。我不認爲元素可以有相同的ID，它不會發出錯誤，但它也不起作用。 – anderish

-1

使用jQuery，您可以在addCss功能補充一點：

$('td').addClass('hide');

來源

2016-03-03 16:27:35

請解釋下投票，如問題的要求，這將隱藏TD標籤。 –

不是downvoter，但可能是因爲（a）OP沒有指定jQuery;和（b）包括jQuery這樣一個瑣碎的任務是不好的做法 – jasonscript

覆蓋類document.getElementById("id").className = "newclass";
添加一個新的類document.getElementById("id").className += " anotherclass";

function addCss(){ 
 
document.getElementById("b").className = "hide"; 
 
} 
 

 
function newCss(){ 
 
document.getElementById("b").className = "show"; 
 
}

body { 
 
    font-size: 3em; 
 
    background: honeydew; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: table-cell; 
 
}

<table> 
 
<tr> 
 
<td id=a style="background:skyblue">A</td> 
 
<td id=b style="background:yellowgreen">B</td> 
 
<td id=c style="background:gold">C</td> 
 
<td id=d style="background:orangered">D</td> 
 
</tr> 
 
</table> 
 

 
<button onclick="addCss()">hide B cell</button> 
 
<button onclick="newCss()">show B cell</button>

來源

2016-03-03 16:31:37

將元素追加到元素

回答

相關問題