Currently, I am working with a table that dynamically generates rows using v-for:
<table>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr v-for='data in datas'><td class='name'>@{{data.name}}</td><td>@{{data.surname}}</td></tr>
</table>
I am facing an issue where I need to hide the column with the class 'name' using jQuery. However, when I use
$('.name').hide();
Only the header disappears. This could be happening because the row is generated dynamically. How can I resolve this?
I have tried:
- Iterating through each element with the class using the each() function
- Applying CSS property
.css('display','none')instead ofhide()
But these solutions did not work. Interestingly, the alert() within each() triggers as expected, but hide() does not affect the added elements.
Here is more specific data about the table layout:
<table class="striped bordered responsive">
<thead>
<tr><th class="stat-table-creatives" colspan="2">Creative info</th><th>Impressions</th><th>Clicks</th><th>CTR</th><th>CPC</th><th>Price per unit</th><th>Sum</th><th class="stat-table-date">Date</th></tr>
</thead>
<tbody>
<tr v-for="stat in stats"><td class="stat-table-creatives">@{{ stat.creativeTitle }}</td><td class="stat-table-creatives">@{{ stat.creativeType }}</td><td>@{{ stat.impressions }}</td><td>@{{ stat.clicks }}</td><td>@{{ stat.ctr }}</td><td>@{{ stat.cpc }}</td><td>@{{ stat.client_price }}</td><td>@{{ stat.sum }}</td><td class="stat-table-date">@{{ stat.date }}</td></tr>
</tbody>
</table>
The following function is triggered on button click:
getJsonForStats: function(filters){
if((filters[0]=='creative')||(filters[1]=='creative')){
$('.stat-table-creatives').show();
} else {
$('.stat-table-creatives').hide();
}
if((filters[0]=='date')||(filters[1]=='date')){
$('.stat-table-date').show();
} else {
$('.stat-table-date').hide();
}
});
This function is called from another function, which is invoked on v-on:click event