Dont’ use $ to call jQuery in wordpress, replace $s with jQuery:
jQuery('.row').click(function() {
if (jQuery(this).attr('att') == 0) {
jQuery(this).css('background', '');
jQuery(this).attr('att', 1);
} else {
jQuery(this).css('background', '#ececff');
jQuery(this).attr('att', 0);
}
});
I am trying to build a div-table to use as a reusable block in WordPress.
I would like the background colour of an entire row to change on click. I have managed to do this but when I insert several instances of the same table (as it is a reusable block, they all have the same class), this effect only appears in the first instance of the table.
When you try to select rows in different tables, nothing happens.
Here is my table:
$('.row').click(function() {
if ($(this).attr('att') == 0) {
$(this).css('background', '');
$(this).attr('att', 1);
} else {
$(this).css('background', '#ececff');
$(this).attr('att', 0);
}
});.row {
display: table-row;
background: #fff;
}
.table-header {
display: table-header-group;
color: #ffffff;
background: #6c7ae0;
border-bottom: 1px solid #f2f2f2;
margin: 0;
}
.cell {
display: table-cell;
}
.row .cell {
font-size: 16px;
color: #666666;
line-height: 1.4em;
font-weight: unset !important;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 25px;
padding-right: 25px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="table-wrapper">
<div class="table">
<ul class="table-header">
<li class="cell">
Title 01
</li>
<li class="cell">Title 02
</li>
</ul>
<ul class="row">
<li class="cell">
<p>Element01.1</p>
</li>
<li class="cell">
<p>Element01.2</p>
</li>
</ul>
<ul class="row">
<li class="cell">
<p>Element02.1</p>
</li>
<li class="cell">
<p>Element02.2</p>
</li>
</ul>
</div>
</div>
</div>I am trying to find a solution to make it possible for the user to select different rows in independent tables (and be able to unselect them if they want to).
Any ideas how to make it happen? I’m not very confident with jquery and I’m at a loss.
Thanks a lot.
Firstly the code in your question already works for multiple instances of the ‘table’:
Also, why not just use a
I can’t use a table element for this because of the sytling applied to the different rows. I haven’t been able to get the borders right, since some seem a little off.
You can definitely still achieve this exact layout using a
In regard to your answer, my issue is that what I want to achieve works well in this table but it doesn’t in other tables that I create in the same post in WordPress. When I click on the rows in the first instance of the table, the code works just fine. But it doesn’t when I try to select other instances of the table in the post. Any thoughts?