Question

昨天我问了一个问题（Button That When Clicked Will Display Hidden Column in HTML Table）。名字是不言自明的，然而，经过几个小时的尝试新事物和失败后，我决定研究一种不同的方法。以下是：

单击按钮时，会将新类附加到元素
通过这样做，我们将使用＆＃39;显示＆＃39;来切换列的可见性。功能在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>包含在forloop中以创建列。

使用Css：

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

.hide{
    display:none;
}

所以这是我需要你帮助的地方。我提出了一个按钮，当点击它时会运行一个JavaScript功能，可以附加＆＃39; .hide＆＃39;类到td标签。

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

我不确定如何编写JavaScript，以及是否需要传递任何参数，例如<td>标记的id。

Answer 1

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

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

注意：第一个＆＃39;之后的空间附加的类名很重要。

为什么呢？：如果你有班级名称＆＃34; class1＆＃34;并附加＆＃34; class2＆＃34; - 它将导致＆＃34; class1class2＆＃34;

通过添加空格，它将导致＆＃34; class1 class2＆＃34;并被认为是两个独立的班级。

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

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

<script>

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

</script>

然后就像你原来那样调用函数。你甚至可以为类名本身添加一个参数。

Answer 2

覆盖班级document.getElementById("id").className = "newclass";
添加新课程document.getElementById("id").className += " anotherclass";

＆＃13;

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

＆＃13;

body {
  font-size: 3em;
  background: honeydew;
}

.hide {
  display: none;  
}

.show {
  display: table-cell;  
}

＆＃13;

<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>

＆＃13;

Answer 3

使用jQuery，您可以在addCss函数中添加它：

critical({})

将Html类附加到元素

3 个答案: