改变一个tr (HTML/JQUERY)的多个类
Changing Multiple classes of a tr (HTML/JQUERY)
我有多个
我试着用:
function changetr(e) {
if(e.className == 'tropen') {
e.className = 'trclose';
} else {
e.className = 'tropen';
}
}
function changetd(e) {
if(e.className == 'poolclose') {
e.className = 'poolopen';
} else {
e.className = 'poolclose';
}
}
我有一个onchange图像:onclick="changetd(pool1);changetr (subpool1);"
但是它只改变了一个tr或td,我想用这个值更新所有的tr或td。
希望有人有一个解决方案,因为我对jquery很陌生。
的例子:
<table>
<!-- Pool open-->
<tbody>
<tr class="tropen">
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class="poolclose" id="poolid2" colspan="2" onclick="changetd(poolid2); changetr(subpool2);"></td>
<td>Test pool 2015</td>
</tr>
<!-- Subpool open-->
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="subpool2">
<td>
<table>
<tbody>
<tr>
<td width="12"></td>
<td class="poolclose" id="subpoolid1" onclick="changetd(substitute1); changetr(subpoolid1);"></td>
<td class="pooltext">test</td>
</tr>
</tbody>
</table>
<!-- Invallers -->
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="substitute1">
<td>
<table>
<tbody>
<tr>
<td width="26"></td>
<td class="poolclose" id="substituteid1" onclick="changetd(substituteid1); changetr(substitutelist1);"></td>
<td class="pooltext">Dit is een invaller</td>
</tr>
</tbody>
</table>
<!-- invaller overzicht -->
<table>
<tbody>
<tr class="trclose" id="substitutelist1">
<td>
<table>
<tbody>
<tr>
<td width="40"></td>
<td class="substitutelist" id="substitutelistid1"></td>
<td>Dit is een lijst met invallers</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Invallers close-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Subpool close-->
<!-- Add a new record if there was no subpool to begin the while loop-->
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="subpool2">
<td>
<table>
<tbody>
<tr>
<td width="12"></td>
<td class="poolplus"></td>
<td class="pooltext">
<form action="/poolbeheer/poolonderdeel" method="post">
<input type="hidden" name="poolid" value="2">
<input type="text" name="subpoolname" required="">
<input type="submit" value="Poolonderdeel Koppelen">
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Subpool close-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--Pool close-->
<!-- Pool open-->
<tr class="tropen">
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class="poolclose" id="poolid1" colspan="2" onclick="changetd(poolid1); changetr(subpool1);"></td>
<td>Test Pool</td>
</tr>
<!-- Subpool open-->
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="subpool1">
<td>
<table>
<tbody>
<tr>
<td width="12"></td>
<td class="poolclose" id="subpoolid2" onclick="changetd(substitute2); changetr(subpoolid2);"></td>
<td class="pooltext">test 2</td>
</tr>
</tbody>
</table>
<!-- Invallers -->
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="substitute2">
<td>
<table>
<tbody>
<tr>
<td width="26"></td>
<td class="poolclose" id="substituteid1" onclick="changetd(substituteid1); changetr(substitutelist1);"></td>
<td class="pooltext">Dit is een invaller</td>
</tr>
</tbody>
</table>
<!-- invaller overzicht -->
<table>
<tbody>
<tr class="trclose" id="substitutelist1">
<td>
<table>
<tbody>
<tr>
<td width="40"></td>
<td class="substitutelist" id="substitutelistid1"></td>
<td>Dit is een lijst met invallers</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Invallers close-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Subpool close-->
<!-- Add a new record if there was no subpool to begin the while loop-->
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="trclose" id="subpool1">
<td>
<table>
<tbody>
<tr>
<td width="12"></td>
<td class="poolplus"></td>
<td class="pooltext">
<form action="/poolbeheer/poolonderdeel" method="post">
<input type="hidden" name="poolid" value="1">
<input type="text" name="subpoolname" required="">
<input type="submit" value="Poolonderdeel Koppelen">
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Subpool close-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--Pool close-->
</tbody>
</table>
$(document).ready(function(){
$("table td").click(function() {
$("table td").toggleClass('tdopen tdclose');
});
});
.tropen{
background-color: red;
}
.trclose{
background-color: blue;
}
.tdopen{
background-color: red;
}
.tdclose{
background-color: blue;
}
table{
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="tropen">
<td class="tdopen">text text text</td>
<td class="tdclose">text text text</td>
</tr>
<tr class="tropen">
<td class="tdopen">text text</td>
<td class="tdclose">text text</td>
</tr>
<tr class="tropen">
<td class="tdopen">text</td>
<td class="tdclose">text</td>
</tr>
</table>
相关文章:
- Jquery - table.row(tr) is undefined
- 在同一tr-jQuery中获取td的值
- Javascript/JQuery删除代码中的父TR问题
- jQuery只隐藏<tr>在一张桌子上
- 响应式表设计:使用JQuery使click()展开tr
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 通过 Jquery 调用 tr 属性并找到我的内部复选框
- 使用 JQuery 在单击表中的 tr 时创建弹出窗口
- 在 jquery 中的 TR 中查找 td 的所有输入
- jQuery选择器,用于查找包含具有特定值的TD输入的TR
- focus Using Jquery <tr> <td>
- jquery如何删除<tr>标记
- jQuery在<TR>TR折叠时标签不起作用
- jQuery父对象(“tr”)淡出不起作用
- jQuery:将tr附加到表tbody可以防止tr单击函数
- previous 10 tr jquery
- 我应该如何访问<tr>在jquery中
- every 10 tr using 10n jquery
- jquery:将TR移动到新移动的TD
- Jquery tr选择器不工作