How To Hide A Table Row Depending On A Value In One Of Its Column
Solution 1:
Assuming your erledigt column is always the second last column then it should be very straight forward.
Iterate through the rows and not the cells and find the second last cell in each row and show/hide the row as required.
$('#subtask_table tr').each(function() {
var$erledigtCell = $(this).find("td").last().prev();
var$row = $erledigtCell.parent();
if($erledigtCell.text() == '1'){
$row.hide();
} else {
$row.show();
}
});
If you have any influence on how the grid is generated it would be much better if you can add a custom attribute to the tr, for example data-erledigt=.... Than you have no traversing to do and it doesn't matter which column erledigt is displayed in.
With Html like this:
<trdata-erledigt=0>....
.....
<trdata-erledigt=1>You could write a jQuery as simple as:
$("tr[data-erledigt='0']").hide();
Solution 2:
$('#subtask_table tr td:eq(6)').each(function() { // eq(6) selects the 7-th td, which is the "completed" columnif(this.innerHTML === '0' || this.innerHTML === '')
{
$(this).parent().hide(); // td.parent returns the tr
}
});
Also, this is redundant (though I'm not sure what this accomplishes, maybe you want to show the rows (tr not td) instead):
$('#subtask_table td').each(function() {
$(this).show();
});
Simply use:
$('#subtask_table td').show();
Solution 3:
I'd probably do this:
$(document).ready(function() {
$('#cbHideCompleted').click(function() {
if($(this).prop('checked')) {
$('#subtask_table td:nth-child(7)').each(function() {
//if td is 'completed' columnvar val = $(this).text();
if (val === "" || val === "0")
$(this).parent().hide();
});
} else {
$('#subtask_table tr').show();
}
});
});
The :nth-child() selector "Selects all elements that are the nth-child of their parent", so $('#subtask_table td:nth-child(7)') selects all the td elements in the 7th column. So loop through those cells and if the text content is an empty string or "0" hide its parent tr element.
In your else branch you don't need an .each() loop: you can call .show() directly on a jQuery object that contains multiple elements and all the elements will be shown.
| ID | Titel | Has A Class, Add Class To Table Cell |
Let's say I have the following html: …
WebRTC Video Constraints Not Working
I'm trying to get a lower resolution from the webcam na…
HasClass Doesn't Work In My Js Code?
I want to use hasClass in the following code, but that does…
I am relatively new to Javascript/Ajax. When the user click…
Highcharts Donutchart: Avoid Showing Duplicate Legend With Nested Charts
I am trying to represent nested data using Highcharts Donut…
How Do I Use Data From Vue.js Child Component Within Parent Component?
I have a form component where I use a child component. I wa…
Logic For The Next Button For The Questionnaire?
I am beginner in AngularJS and facing some issues. I am try…
Assignment To Property Of Function Parameter (no-param-reassign)
I have this function and while I have this working nicely, …
I am making a web application using nodejs and angular cli …
How To Show Website Preloader Only Once
I added a preloader to my website and the preloader animati…
|
|---|
Post a Comment for "How To Hide A Table Row Depending On A Value In One Of Its Column"