因此,我希望能够通过单击按钮来切换表中的列。
我研究了 jQuery 的切换类函数,并认为我可以为 th(表头)和 td(HTML 表格中的单元格)提供相同的类,然后在单击按钮时执行切换类。
这是我的 Dashboard.tsx 文件中的表格:
<table>
<thead>
<tr>
<th class="lastname">LastName</th>
<tr>
</thead>
<tbody>
{
this.1stUserInfo.map((value, index, array) => {
return(
<tr>
<td class="lastname">{value.LastName}</td>
</tr>);
}, this)
}
</tbody>
</table>
这是我的按钮:
<Button id="lastnamebutton" onClick={(e) => this.ShowLastName(e,this)}>Toggle Last Name</Button>
这是我在 JavaScript 中实现的函数,我在其中实现了toggleClass
public ShowLastName(event, caller) {
$("#lastnamebutton").toggleClass(".lastname");
}
我做错了什么和/或者你能想出另一种方法来切换表格中的列吗?
最佳答案
在不正确的元素上调用了toggleClass()
。应该在 .lastname
上调用它,而不是 #lastnamebutton
。
这是一个示例(顺便说一句,这个案例与 React 无关):
window.toggleColumn = function() {
$('.yclass').toggleClass('hide');
};
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>X</th>
<th class="yclass">Y</th>
<th>Z</th>
</thead>
<tbody>
<tr>
<td>42</td>
<td class="yclass">45</td>
<td>46</td>
</tr>
<tr>
<td>72</td>
<td class="yclass">62</td>
<td>22</td>
</tr>
</tbody>
</table>
<button onclick="window.toggleColumn()">
Click
</button>
关于javascript - 如何使用 jQuery 的toggleClass 在按钮单击时切换列中的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43838593/