I have 5 variables extracted from a json packet that I display in a table. I want to sum those five to make a sixth variable that I can then also use in the table.
The variables I want to sum are activity1distance to activity5distance, summed to activitytotaldistance
The page in question is
https://vk7krj.com/running.html
and the table is the "Last 5 activities on Strava"
Below is the relevant code from the page-
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data)
$("#start_date_local_1").html((data[0].start_date_local).slice(0, 10))
$("#activity1type").html(data[0].type)
$("#activity1name").html(data[0].name)
$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3))
$("#elevation1").html(data[0].total_elevation_gain)
$("#moving_time_1").html(toTime(data[0].moving_time))
$("#start_date_local_2").html((data[1].start_date_local).slice(0, 10))
$("#activity2type").html(data[1].type)
$("#activity2name").html(data[1].name)
$("#activity2distance").html(((data[1].distance) / 1000).toFixed(3))
$("#elevation2").html(data[1].total_elevation_gain)
$("#moving_time_2").html(toTime(data[1].moving_time))
$("#start_date_local_3").html((data[2].start_date_local).slice(0, 10))
$("#activity3type").html(data[2].type)
$("#activity3name").html(data[2].name)
$("#activity3distance").html(((data[2].distance) / 1000).toFixed(3))
$("#elevation3").html(data[2].total_elevation_gain)
$("#moving_time_3").html(toTime(data[2].moving_time))
$("#start_date_local_4").html((data[3].start_date_local).slice(0, 10))
$("#activity4type").html(data[3].type)
$("#activity4name").html(data[3].name)
$("#activity4distance").html(((data[3].distance) / 1000).toFixed(3))
$("#elevation4").html(data[3].total_elevation_gain)
$("#moving_time_4").html(toTime(data[3].moving_time))
$("#start_date_local_5").html((data[4].start_date_local).slice(0, 10))
$("#activity5type").html(data[4].type)
$("#activity5name").html(data[4].name)
$("#activity5distance").html(((data[4].distance) / 1000).toFixed(3))
$("#elevation5").html(data[4].total_elevation_gain)
$("#moving_time_5").html(toTime(data[4].moving_time))
if (data[0].distance > 0) {
$("#time_km_1").html(toTime(((data[0].moving_time) / ((data[0].distance) / 1000))).slice(3))
} else {}
if (data[1].distance > 0) {
$("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
} else {}
if (data[2].distance > 0) {
$("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
} else {}
if (data[3].distance > 0) {
$("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
} else {}
if (data[4].distance > 0) {
$("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
} else {}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>
So there is a pattern, that I am sure you saw, that you can repeat, thus condensing your code:
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data);
/* ADDED A VARIABLE HERE CALLED AGGREGATE */
/* INITIALIZED IT TO 0 AND ADD ANOTHER NUMBER TO IT... */
let aggregate = 0;
for (let i = 0; i < 5; i++)
{
$("#start_date_local_" + (i + 1)).html((data[0].start_date_local).slice(0, 10))
$("#activity" + (i + 1) + "type").html(data[i].type)
$("#activity" + (i + 1) + "name").html(data[i].name)
$("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3))
$("#elevation" + (i + 1)).html(data[i].total_elevation_gain)
$("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time))
if (data[i].distance > 0) {
$("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3))
} else {}
/* HERE! (FOLLOW UP FROM PREVIOUS COMMENT) */
aggregate += Number(data[i].distance);
console.log(aggregate);
// we can get an element with document.getElementById()
// then we can use .innerHTML on the element and set it to something
the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
the_div_element_we_want_to_add_data_to.innerHTML = aggregate / 1000;
//etc etc
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>
Unfortuneately, I can't get /running/stava_activities.json to test if I made the proper corrections, but the concept is there. I left an aggregate at the bottom of the for loop to show how you might sum those values.
Related
I'm trying to organize 8 tables in html on one page and I'm having a hard time placing them. Any helpful tips? I attached the picture below for what I want the page to look like. I'd appreciate any feedback from the community. The tables hold different data.
T8 Tables on page
I tried different CSS classes for each table and I'm not successful. Maybe placing tables in html isn't possible?
you could use grid, helpful here
you put your tables inside each div.
you can play with those values if you want to change row, col sizes
grid-template-rows: 30% 30% 25% 15%;
grid-template-columns: 1fr 1fr 1fr;
you can also add some gap
(and remove background color, it's only to visualize the different div. Same with container 100vw 100vh widht and height if not needed)
html,
body {
margin: 0;
padding: 0;
}
#container {
display: grid;
grid-template-rows: 30% 30% 25% 15%;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
width: 100vw;
height: 100vh;
}
#div1 {
grid-area: 1 / 1 / 3 / 2;
background-color: rgba(242, 161, 133, 0.5);
}
#div2 {
grid-area: 3 / 1 / 4 / 2;
background-color: rgba(194, 36, 48, 0.5);
}
#div3 {
grid-area: 4 / 1 / 5 / 2;
background-color: rgba(130, 89, 39, 0.5);
}
#div4 {
grid-area: 1 / 2 / 5 / 3;
background-color: rgba(242, 237, 87, 0.5);
}
#div5 {
grid-area: 1 / 3 / 2 / 4;
background-color: rgba(95, 135, 96, 0.5);
}
#div6 {
grid-area: 2 / 3 / 3 / 4;
background-color: rgba(181, 119, 79, 0.5);
}
#div7 {
grid-area: 3 / 3 / 4 / 4;
background-color: rgba(184, 129, 60, 0.5);
}
#div8 {
grid-area: 4 / 3 / 5 / 4;
background-color: rgba(165, 223, 116, 0.5);
}
#container table {
width: 100%;
height: 100%;
}
<div id="container">
<div id="div1">
<table>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</table>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
</div>
This should do the trick.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.col {
flex: 1;
padding: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 8px;
margin-top: 8px;
}
td, th {
border: 2px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<h2> TABLE 1</h2>
<table title="Table #1">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
<h2> TABLE 7</h2>
<table title="Table #7">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
<h2> TABLE 8</h2>
<table title="Table #8">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
</div>
<div class="col">
<h2> TABLE 2</h2>
<table title="Table #2">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
</div>
<div class="col">
<h2> TABLE 3</h2>
<table title="Table #3">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
<h2> TABLE 4</h2>
<table title="Table #4">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
<h2> TABLE 5</h2>
<table title="Table #5">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
<h2> TABLE 6</h2>
<table title="Table #6">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
I populated each cell with a single space. It should look like this:
multiple tables in differnt colums
I work with filtering, and i have issues, i have 4 option input in which i have some data which i need to filter in table, for now i filter data only for one column, but problem is if i will add one more filter, script will not work, and filter data from the last selected value. But i need if i have 2-4 selected values in option data is filtering.
My code:
JS:
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr").hide();
filters.forEach(filter => {
$("#orderListData td" + filter).parent().show();
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/
So if in options number 3 u will chosse 023 and tap add filters it's will work, but if i chosse 023 and options number 4 BOOKED it's will filter only booked status, where is problem?
By doing $("#orderListData td" + filter).parent().show() on every filter, you are essentially showing every row that matches EVEN ONE of the filters. While you have to show only those rows which can satisfy ALL filters.
So instead of looping through filters and checking if any td element satisfies it, loop through the rows and check if it satisfies every filter.
Use this code to do so ( Only the filterData function is changed )
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr");
rows.hide();
//Check if any row satisfy all filters
$.each(rows, (i, row) => {
if (filters.every(filter => $(row).find(filter).length)) {
$(row).show();
}
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.row::after {
display: table;
clear: both;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>
<div class=" col-2">
<select class="form-control secondary-select" id="materialCode">
<option></option>
<option>16014344C</option>
<option>16016398A</option>
<option>16009838A</option>
</select>
<p><strong>Material Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="plantCode">
<option></option>
<option>0119</option>
<option>0379</option>
</select>
<p><strong>Plant Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="vsCode">
<option></option>
<option>023</option>
<option>0379</option>
</select>
<p><strong>Value Stream Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="statusCode">
<option></option>
<option>BOOKED</option>
<option>RELEASED</option>
</select>
<p><strong>Status</strong></p>
</div>
<div class="col-1">
<button id="filterButton" class="button button-clear butt-heith">
Apply filters
</button>
</div>
</div>
<button id="cancelFilters" class="button button-deactivate float-right">
Cancel filters
</button>
<table class="table-editor" id="ordersList">
<thead>
<tr>
<th>Production order code</th>
<th>Material code</th>
<th>Target quantity</th>
<th>Plant code</th>
<th>Value stream code</th>
<th>Status</th>
<th>Release date</th>
<th>Activation date</th>
<th>Booking date</th>
<th>TPT (d)</th>
</tr>
</thead>
<tbody id="orderListData">
<tr>
<td>
14298947
</td>
<td class="column1">
11027174A
</td>
<td>
1
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 06:57:42
</td>
<td></td>
<td>
2020-03-02 08:12:22
</td>
<td>
0.1 </td>
</tr>
<tr>
<td>
80150671
</td>
<td class="column1">
11019682A
</td>
<td>
800
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:02:32
</td>
<td></td>
<td>
2020-03-02 15:30:51
</td>
<td>
0.3 </td>
</tr>
<tr>
<td>
80150672
</td>
<td class="column1">
15000987A
</td>
<td>
503
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:28:04
</td>
<td></td>
<td>
2020-03-13 00:00:00
</td>
<td>
10.6 </td>
</tr>
<tr>
<td>
80150673
</td>
<td class="column1">
11011572E
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:32
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150674
</td>
<td class="column1">
18300753C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:57
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150675
</td>
<td class="column1">
11014966C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:31:26
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150676
</td>
<td class="column1">
11014264D
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:33:48
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150677
</td>
<td class="column1">
18300753C
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:34:16
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150678
</td>
<td class="column1">
11020109B
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:34:38
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150679
</td>
<td class="column1">
15001454B
</td>
<td>
100
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:37:59
</td>
<td></td>
<td>
2020-03-12 00:00:00
</td>
<td>
9.6 </td>
</tr>
</tbody>
</table>
I would like to show each hidden row using the same button. When the user clicks add+ to display another hidden row. If that makes since.
I'm using this script to hide all table rows except the first one.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
});
</script>
</script>
When the button (#add) is clicked once, if the row is not visible show next row
otherwise remain hidden. This works well for displaying one table. How would I
go about displaying the rest of the tables like this one without spitting them all out at once? I would like them displayed one by one.
<script type="text/javascript">
$("#add").click(function () {
if ($('tr#row2:visible').length==0)
{
$('tr#row2').show();
$("#add").attr('value','Remove');
}
else{
$('tr#row2').hide();
$("#add").attr('value','Add');
}
});
</script>
The rest of the code looks something like this and each row has a different ID.
Any Ideas?
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px"/>
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
If this isn't what you're after let me know and I'll see if I can't help you out. At least It may give you some ideas.
<script type='text/javascript'>
var currentRow = 2;
var previousRow = null;
var defaultRowNumber = 2; // constant: For when we need to reset current row value.
var resetRowNumberOn = 7; // constant: This looks odd but it's how the function and math works together.
$(document).ready(function () {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
$("#add").click(function () {
ShowHideRow(currentRow)
});
var ShowHideRow = function (rowNumber) {
if ($('tr#row' + rowNumber + ' :visible').length == 0) {
$('tr#row' + rowNumber).show();
$("#add").attr('value', 'Remove');
}
else {
$("#add").attr('value', 'Add');
}
if (typeof previousRow === 'number')
$('tr#row' + (previousRow)).hide();
previousRow = currentRow;
currentRow++;
if (currentRow === resetRowNumberOn) {
currentRow = defaultRowNumber;
$('tr#row' + (previousRow)).hide();
previousRow = null;
}
}
});
</script>
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px" />
<tr id="row1">
<td>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td>2 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td>3 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td>4 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td>5 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Having this anywhere in the code :
$(".dates > tr > td > .notInTheMonth").bind('click', '.notInTheMonth', function() {
...
$(this).one("updatedCalendar",function(){
$(this).addClass("active");
})
});
To trigger it, i've tried this :
$(".dates > tr > td > .notInTheMonth").trigger("updatedCalendar");
Why it will not work and how to make it work ?
EDIT
Here is the html :
<body>
<div class="planner">
<div class="calendar">
<div class="calendar-header">
...
</div>
<table class="itemsCalendar">
<thead>
<tr>
<th>
Lun
</th>
...
</tr>
</thead>
<tbody class="dates">
<tr>
<td>
<span class="notInTheMonth">25</span>
</td>
<td>
<span class="notInTheMonth">26</span>
</td>
...
</tr>
<tr>
<td>
<span class="today">2</span>
</td>
<td>
<span date="3-4-2016" class="">3</span>
</td>
...
</tr>
<tr>
[...]
</tr>
<tr>
<td>
<span date="30-4-2016">30</span>
</td>
<td>
<span date="31-4-2016">31</span>
</td>
<td>
<span class="notInTheMonth">1</span>
</td>
<td>
<span class="notInTheMonth">2</span>
</td>
<td>
<span class="notInTheMonth">3</span>
</td>
<td>
<span class="notInTheMonth">4</span>
</td>
<td>
<span class="notInTheMonth">5</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Everything is generated by javascript. It will output a planner, with the correct day according to the month and the years
I have a page with three tables I'm sorting: two reports tables in a div id'ed as report-table(which DOESN'T sort) and one id'ed as workstation-table (which DOES sort). The initialisation of the sort is the same code so I'm not sure what's going on.
JS
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
}, 5000);
var clicks = true
$("#application-name-label").animate({
"color": "black"
}, 1000);
$("#refresh-5-sec").addClass("pressed-button")
$("#refresh-button").on("click", function(event) {
var buttonGroup = $(this).next();
if(clicks) {
$(buttonGroup).fadeOut(
function() {
$(this).parent().css('padding-right', '235px');
$(this).parent().animate({
paddingRight: "15"
}, 300);
clicks = false;
});
} else {
$(buttonGroup).fadeIn();
clicks = true;
};
});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("report-table").tablesorter({sortList: [[0,1], [1,0]]});
});
}, interval);
}
});
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5 sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30 sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60 sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
1,825,301
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,187,231
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
dolore
</td>
<td>
4,051,833
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
assumenda
</td>
<td>
4,921,630
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
7,047,737
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
3,806,981
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
sit
</td>
<td>
1,580,987
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,477,697
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,313,774
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quidem
</td>
<td>
219,960
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,816,119
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,946,655
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,278,956
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
7,676,013
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
1,230,434
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
5,415,422
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,622,098
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
6,462,915
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
8,797,296
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
9,564,459
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
8,010,943
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
524,049
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered' id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
recusandae
</td>
<td>
27,035
</td>
<td>
2,634,369
</td>
<td>
2013-09-05 21:18:46
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
49,685
</td>
<td>
1,364,771
</td>
<td>
2013-08-17 18:05:39
</td>
</tr>
<tr>
<td>
in
</td>
<td>
5,970
</td>
<td>
985,174
</td>
<td>
2013-07-16 09:57:24
</td>
</tr>
<tr>
<td>
nihil
</td>
<td>
17,907
</td>
<td>
8,029,822
</td>
<td>
2013-09-08 09:07:35
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
42,146
</td>
<td>
9,447,817
</td>
<td>
2013-07-23 14:25:28
</td>
</tr>
<tr>
<td>
facere
</td>
<td>
53,008
</td>
<td>
4,056,927
</td>
<td>
2013-07-15 22:49:34
</td>
</tr>
<tr>
<td>
et
</td>
<td>
41,147
</td>
<td>
5,211,530
</td>
<td>
2013-07-18 03:52:58
</td>
</tr>
<tr>
<td>
autem
</td>
<td>
29,545
</td>
<td>
3,338,005
</td>
<td>
2013-09-11 06:55:50
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://abbottwaters.net/keshaun_smitham
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://jones.biz/ashlynn_schaden
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
In your report-table your tbody is empty. Move all your rows into the tbody and you should be good.