I have a table with this columns in HTML page. Razor is used for output. The values are generated dynamically from the database.
| ID | Name | Week_1 | Week_2 | ... | Week_52 |
|---|---|---|---|---|---|
| 1 | Test1 | 3 | 1 | ||
| 2 | Test2 | 2 | 3 | 3 | |
| 3 | Test3 | 5 | 1 |
And for example I want to hide column Week_52 because column has no values in all rows. The column (table -> thead -> tr -> th) has no children, so I don't understand how they can be associated with values in (table -> tbody -> tr -> td).
How can I do this in vanilla javascript? Or maybe there is another solution?
Edited. 0 -> empty
I solved the problem. I added id="myAnchor" to the table with attribute data-currentweek. (I get currentweek value from database using Razor)
function hideWeekColumns(){
const myAnchor = document.getElementById("myAnchor");
currentweek = myAnchor.dataset.currentweek-1;
let weeks = document.getElementsByClassName('column week');
let weeks_array = Array.from( weeks );
weeks_array.splice(0, currentweek); // from position 0, remove 1 element
weeks_array.forEach(element => {
element.style.display = 'none';
});
};
hideWeekColumns();
By Using jquery you can achieve this
The first step includes a jquery file and then
at bottom add
<script>
let hide = {}
for(let i = 1; i <= 52; i++){
hide[i] = true
}
$('table tbody tr').each(function(){
let cn = -1
$(this).find('td').each(function(){
if($.trim($(this).text()) != '0' && hide[cn]){
hide[cn] = false
}
cn++
})
})
console.log(hide)
for (var key of Object.keys(hide)) {
if(hide[key]){
$('table tr td:nth-child('+key+')').hide()
}
}
</script>