Copying table data into javascript json object within page - javascript

I have a page with mainly an html table having several columns.
Two of which are longitude and latitude which can be referenced by #tablename tr td:nth-child(9) and 10.
After the page is loaded I want to copy every row for the two columns into a javascript json object.
I plan to use the json to populate a dynamically generated graph (d3 geo).
The main aim to avoid embedding a duplicate copy of the data in json form within the page.
Note that the table and javascript code will be on the same page and the table data will never be modified.
Any suggestions or libraries to easily achieve this?


You can use the JQuery plugin for Table To JSON like so:
let data = $(`#myTable`).tableToJSON();
console.log(data);
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json#1.0.0/lib/jquery.tabletojson.min.js"
integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU="
crossorigin="anonymous"></script>
<table id="myTable">
<thead>
<tr>
<th>Catalog</th>
<th>HIP</th>
<th>Proxy</th>
<th>RAhms</th>
<th>DEdms</th>
<th>Vmag</th>
<th>VarFlag</th>
<th>r_Vmag</th>
<th>RAdeg</th>
<th>DEdeg</th>
<th>Plx</th>
<th>pmRA</th>
<th>pmDE</th>
<th>e_RAdeg</th>
<th>e_DEdeg</th>
<th>e_Plx</th>
<th>e_pmRA</th>
<th>e_pmDE</th>
<th>DE:RA</th>
<th>BTmag</th>
<th>e_BTmag</th>
<th>VTmag</th>
<th>e_VTmag</th>
<th>m_BTmag</th>
<th>B-V</th>
<th>e_B-V</th>
<th>r_B-V</th>
<th>V-I</th>
<th>e_V-I</th>
<th>r_V-I</th>
<th>Hpmag</th>
<th>e_Hpmag</th>
<th>Hpscat</th>
<th>o_Hpmag</th>
<th>m_Hpmag</th>
<th>Hpmax</th>
<th>HPmin</th>
<th>Period</th>
<th>HvarType</th>
<th>Ncomp</th>
<th>MultFlag</th>
<th>Qual</th>
<th>m_HIP</th>
<th>theta</th>
<th>rho</th>
<th>Survey</th>
<th>Chart</th>
<th>HD</th>
<th>CoD</th>
<th>(V-I)red</th>
<th>SpType</th>
<th>r_SpType</th>
</tr>
</thead>
<tbody>
<tr id="85344">
<td> H </td>
<td> <a target="_blank" href="http://news.sky-map.org/starview?object_type=1&object_id=343839">85344</a> </td>
<td> </td>
<td> 17 26 23.25 </td>
<td> +22 06 35.5 </td>
<td> 8.81 </td>
<td> 2 </td>
<td> H </td>
<td> 261.59688825 </td>
<td> +22.10985186 </td>
<td> 3.28 </td>
<td> 6.04 </td>
<td> -21.15 </td>
<td> 0.73 </td>
<td> 0.95 </td>
<td> 1.22 </td>
<td> 1.14 </td>
<td> 1.57 </td>
<td> -0.26 </td>
<td> 10.969 </td>
<td> 0.042 </td>
<td> 9.002 </td>
<td> 0.014 </td>
<td> </td>
<td> 1.667 </td>
<td> 0.036 </td>
<td> T </td>
<td> 1.99 </td>
<td> 0.09 </td>
<td> O </td>
<td> 8.8883 </td>
<td> 0.0035 </td>
<td> 0.037 </td>
<td> 153 </td>
<td> </td>
<td> 8.84 </td>
<td> 8.95 </td>
<td> </td>
<td> U </td>
<td> 1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> 1.94 </td>
<td> M1 </td>
<td> S </td>
</tr>
<tr id="85345">
<td> H </td>
<td> <a target="_blank" href="http://news.sky-map.org/starview?object_type=1&object_id=1104384">85345</a> </td>
<td> </td>
<td> 17 26 24.05 </td>
<td> +65 14 10.7 </td>
<td> 8.72 </td>
<td> </td>
<td> H </td>
<td> 261.60020844 </td>
<td> +65.23630285 </td>
<td> 1.87 </td>
<td> -6.50 </td>
<td> 6.18 </td>
<td> 0.59 </td>
<td> 0.70 </td>
<td> 0.69 </td>
<td> 0.52 </td>
<td> 0.79 </td>
<td> -0.10 </td>
<td> 9.982 </td>
<td> 0.022 </td>
<td> 8.820 </td>
<td> 0.014 </td>
<td> </td>
<td> 0.997 </td>
<td> 0.020 </td>
<td> T </td>
<td> 0.98 </td>
<td> 0.02 </td>
<td> L </td>
<td> 8.8854 </td>
<td> 0.0015 </td>
<td> 0.013 </td>
<td> 91 </td>
<td> </td>
<td> 8.86 </td>
<td> 8.91 </td>
<td> </td>
<td> C </td>
<td> 1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> 0.95 </td>
<td> G0 </td>
<td> S </td>
</tr>
</tbody>
</table>

Related

Organizing 8 separate tables in HTML on One Page

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

Transpose Table with 'colspan' and 'rowspan' Attribute

I'm trying to transpose a table that has cells with the rowspan and cellspan attributes. I've tried examples (here and here) that transpose tables, but they don't account for the cell size - therefore the rows and columns end up being too long or too short.
How can I transpose my table and ensure it remains rectangular.
This is my html for the table.
table tr:first-child {
color: #FFFFFF;
background-color: #639187;
}
table tr td:first-child {
color: #FFFFFF;
background-color: #639187;
}
<table cellspacing="0" border="1">
<tbody>
<tr>
<td></td>
<td colspan="1">9:00</td>
<td colspan="1">9:15</td>
<td colspan="1">9:30</td>
<td colspan="1">9:45</td>
<td colspan="1">10:00</td>
<td colspan="1">10:15</td>
<td colspan="1">10:30</td>
<td colspan="1">10:45</td>
<td colspan="1">11:00</td>
<td colspan="1">11:15</td>
<td colspan="1">11:30</td>
<td colspan="1">11:45</td>
<td colspan="1">12:00</td>
<td colspan="1">12:15</td>
<td colspan="1">12:30</td>
<td colspan="1">12:45</td>
<td colspan="1">13:00</td>
<td colspan="1">13:15</td>
<td colspan="1">13:30</td>
<td colspan="1">13:45</td>
<td colspan="1">14:00</td>
<td colspan="1">14:15</td>
<td colspan="1">14:30</td>
<td colspan="1">14:45</td>
<td colspan="1">15:00</td>
<td colspan="1">15:15</td>
<td colspan="1">15:30</td>
<td colspan="1">15:45</td>
<td colspan="1">16:00</td>
<td colspan="1">16:15</td>
<td colspan="1">16:30</td>
<td colspan="1">16:45</td>
<td colspan="1">17:00</td>
<td colspan="1">17:15</td>
<td colspan="1">17:30</td>
<td colspan="1">17:45</td>
<td colspan="1">18:00</td>
</tr>
<tr>
<td rowspan="1">Madrid</td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="1">London</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
</tr>
<tr>
<td rowspan="1">Paris</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td> </td>
</tr>
</tbody>
</table>

I found this a nice challenge to do using plain old JavaScript. It differs enough from a previous question that I don't think it's a duplicate. Note that the code below works only for rowspans in the original table; the logic should be adaptable for colspans however.
It also doesn't take into account headers (theads or ths) or footers (tfooters). I don't think it would be horribly difficult to account for them.
I've added comments to the code below for guidance, but please do ask any questions you might have.
console.time();
const transpose = m => m[0].map((x, i) => m.map(x => x[i]));
const table = document.getElementById("transposed");
const rows = Array.from(table.querySelectorAll("tr"));
const totalRowCount = rows.length;
// First, create an array of the rows and within each element,
// an array of the cells; easier to deal with than NodeLists.
// This could be done more cleverly with map or reduce, but
// I like good old fashioned for loops.
const m = new Array(totalRowCount);
for (let r = 0; r < rows.length; r++) {
const row = rows[r];
const cells = Array.from(row.querySelectorAll("td"));
m[r] = [];
for (let c = 0; c < cells.length; c++) {
const cell = cells[c];
let rowspan = cell.getAttribute("rowspan");
let colspan = cell.getAttribute("colspan");
rowspan = rowspan && parseInt(rowspan, 10);
colspan = colspan && parseInt(colspan, 10);
// Note that I'm swapping colspan and rowspan here in the
// cells of my array. I could do this after transposition,
// but felt like doing it here.
// Note also that unlike in the duplicate question, I
// default the attribute to 1 rather than 0. I found that
// some browsers get messed up with spanning 0 rows/columns.
cell.setAttribute("colspan", rowspan || 1);
cell.setAttribute("rowspan", colspan || 1);
// I'm using a temporary object here to make it easier to
// access information about the cell later on, without adding
// that information to the DOM.
m[r].push({
element: cell,
index: c,
rowspan: rowspan || 0,
colspan: colspan || 0
});
}
}
// Now m contains an array of arrays. Each of the 4 elements
// in the topmost array contains a different number of elements.
// The elements are objects containing the <td>, its index in
// the row and the rowspan and colspan for that cell.
// So, we'll build another array of arrays, this time with
// objects to represent the cells that are spanned.
let rowsToSpan = 0;
let colsToSpan = 0;
let cellsToInject = new Array(m.length);
for (let r = 0; r < m.length; r++) {
let colSpannedCells = m[r].filter(c => c.colspan && c.colspan > 1);
cellsToInject[r] = new Array(colSpannedCells.length);
for (let c = 0; c < colSpannedCells.length; c++) {
let cell = colSpannedCells[c];
cellsToInject[r].push({
index: cell.index,
cells: new Array(cell.colspan - 1)
});
}
}
// Now we have an array of arrays of the cells we want to inject, so we iterate
// over them, splicing the "empty" cells into the array.
var r = 0;
// One might wonder why I'm using for..of here, where I didn't previously; good
// question. :) I was playing around with performance (hence the console.time() and
// console.timeEnd()) and wanted to see the effect. This would work just as well
// with a normal for loop.
for (let row of cellsToInject) {
if (row && row.length) {
var injectIndex = 0;
var injectCount = 0;
for (let col of row) {
if (col && col.cells.length) {
col.cells.fill({
element: null,
rowspan: null,
colspan: null
});
// The trick here is to ensure we're taking account of previously
// injected cells to ensure the new set of cells are injected in
// the correct place.
injectIndex = col.index + injectCount + 1;
Array.prototype.splice.apply(m[r], [injectIndex, 0, ...col.cells])
// Keeping a running tally of the number of cells injected helps.
injectCount += col.cells.length;
}
}
}
r++;
}
// Now m is an array of arrays, with each element in the topmost
// array having an equal number of elements. This makes the transposition
// work better.
const transposed = transpose(m);
// Now we remove the tbody and inject our own.
table.removeChild(table.querySelector("tbody"));
let tbody = document.createElement("tbody");
// Just iterate over the transposed array, creating a row for each
// element, and iterate over the nested array, adding the element
// for each (where present) back in.
for (let rw of transposed) {
const row = document.createElement("tr");
for (let ce of rw) {
if (ce && ce.element) {
row.appendChild(ce.element);
}
}
tbody.appendChild(row);
}
table.appendChild(tbody);
console.timeEnd();
table tr:first-child {
color: #FFFFFF;
background-color: #639187;
}
table tr td:first-child {
color: #FFFFFF;
background-color: #639187;
}
<table cellspacing="0" border="1" id="not-transposed">
<tbody>
<tr>
<td></td>
<td colspan="1">9:00</td>
<td colspan="1">9:15</td>
<td colspan="1">9:30</td>
<td colspan="1">9:45</td>
<td colspan="1">10:00</td>
<td colspan="1">10:15</td>
<td colspan="1">10:30</td>
<td colspan="1">10:45</td>
<td colspan="1">11:00</td>
<td colspan="1">11:15</td>
<td colspan="1">11:30</td>
<td colspan="1">11:45</td>
<td colspan="1">12:00</td>
<td colspan="1">12:15</td>
<td colspan="1">12:30</td>
<td colspan="1">12:45</td>
<td colspan="1">13:00</td>
<td colspan="1">13:15</td>
<td colspan="1">13:30</td>
<td colspan="1">13:45</td>
<td colspan="1">14:00</td>
<td colspan="1">14:15</td>
<td colspan="1">14:30</td>
<td colspan="1">14:45</td>
<td colspan="1">15:00</td>
<td colspan="1">15:15</td>
<td colspan="1">15:30</td>
<td colspan="1">15:45</td>
<td colspan="1">16:00</td>
<td colspan="1">16:15</td>
<td colspan="1">16:30</td>
<td colspan="1">16:45</td>
<td colspan="1">17:00</td>
<td colspan="1">17:15</td>
<td colspan="1">17:30</td>
<td colspan="1">17:45</td>
<td colspan="1">18:00</td>
</tr>
<tr>
<td rowspan="1">Madrid</td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="1">London</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
</tr>
<tr>
<td rowspan="1">Paris</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td> </td>
</tr>
</tbody>
</table>
<table cellspacing="0" border="1" id="transposed">
<tbody>
<tr>
<td></td>
<td colspan="1">9:00</td>
<td colspan="1">9:15</td>
<td colspan="1">9:30</td>
<td colspan="1">9:45</td>
<td colspan="1">10:00</td>
<td colspan="1">10:15</td>
<td colspan="1">10:30</td>
<td colspan="1">10:45</td>
<td colspan="1">11:00</td>
<td colspan="1">11:15</td>
<td colspan="1">11:30</td>
<td colspan="1">11:45</td>
<td colspan="1">12:00</td>
<td colspan="1">12:15</td>
<td colspan="1">12:30</td>
<td colspan="1">12:45</td>
<td colspan="1">13:00</td>
<td colspan="1">13:15</td>
<td colspan="1">13:30</td>
<td colspan="1">13:45</td>
<td colspan="1">14:00</td>
<td colspan="1">14:15</td>
<td colspan="1">14:30</td>
<td colspan="1">14:45</td>
<td colspan="1">15:00</td>
<td colspan="1">15:15</td>
<td colspan="1">15:30</td>
<td colspan="1">15:45</td>
<td colspan="1">16:00</td>
<td colspan="1">16:15</td>
<td colspan="1">16:30</td>
<td colspan="1">16:45</td>
<td colspan="1">17:00</td>
<td colspan="1">17:15</td>
<td colspan="1">17:30</td>
<td colspan="1">17:45</td>
<td colspan="1">18:00</td>
</tr>
<tr>
<td rowspan="1">Madrid</td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="1">London</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
<td> </td>
</tr>
<tr>
<td rowspan="1">Paris</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
<td> </td>
</tr>
</tbody>
</table>
Note: transpose comes from this answer to Transposing a 2D-array in JavaScript by Mahdi Jadaliha.

Add/show each row by unique ID

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>

position fixed the first row of my table when it reaching the top of the browser

is it posible to have the first row of the table to position:fixed when it reaching the top of the browser so that when you scroll further down you still see the names?
this is the page of the website where i want to do this:
http://all-areas-bikers.be/klassement
my html is:
<div id="wrapper" style="height:750px" >
<div id="positionFix">
<table class="klassement">
<tbody>
<tr class="leden">
<td class="datum">Datum</td>
<td>Bart</td>
<td>Benny</td>
<td>Marijn</td>
<td>Peter</td>
<td>Pieter</td>
<td>Steven Ds</td>
<td>Steven Sp</td>
<td>Sven</td>
<td>Wim</td>
</tr>
</tbody>
</table>
</div>
<table class="klassement">
<tbody>
<tr class="leden nocolor">
<td class="datum"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">2 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">9 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">16 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum"> 23 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">2 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">9 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">16 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum"> 23 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">30 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">6 apr 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">13 apr 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
I have read a lot of other question which are almost the same but canot come trough the solution. The table will be getting longer as the year goes by.
My javascript is not that good so please can someone help me with this. It is a joomla site, so i don't know if its posible.
Benny

Something like this:
table tr:first-child {
position:fixed;
}
http://jsfiddle.net/gxn72/
Ok, to give you an idea of what you have to do:
$(window).scroll(function() {
var row = $('table tr:first-child');
rowOff = row.offset();
if (rowOff.top < 10) {
row.css({position:fixed, top:0});
});
I made it < 10 because you have to fiddle a bit around with when the browser sending the actual number...

I found a piece of code from another answer:
$(document).ready(function() {
var theLoc = $('ul').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('ul').hasClass('fixed')) {
$('ul').removeClass('fixed');
}
} else {
if(!$('ul').hasClass('fixed')) {
$('ul').addClass('fixed');
}
}
});
});
I'm guessing that you should replace the 'ul' part in this code with your class 'leden', and make sure that the class that is added contains the necessary positioning.

bootstrap table ajax not loading styles

Hello I have a bootstrap table in my page and I'm getting some data via ajax to make some rows. However when data is parsed form ajax the table doesn't have any styles to it. But when I paste the same html code from ajax, in my php file and load it on the browser it shows just fine. Here is the js function but there is no error to it. I'm apparently missing something about bootstrap loading dynamic content?
$(document).ready(function () {
new request('records', {
column: 'id',
order: 'DESC'
}, processReply);
});
function processReply(data) {
this.createRow = function () {
return document.createElement('tr');
}
this.createCell = function () {
return document.createElement('td');
}
this.container = document.getElementById('records-table')
for (i = 0; i < data.length; i++) {
var tr = this.createRow();
for (prop in data[i]) {
var td = this.createCell();
td.innerHTML = data[i][prop];
tr.appendChild(td);
}
container.appendChild(tr);
}
}
function request(cmd, args, callback) {
var req = $.ajax({
url: "/api/" + cmd,
type: "POST",
data: {
params: args
},
dataType: "json"
});
req.done(function (reply) {
callback(reply);
});
req.fail(function (jqXHR, textStatus) {
//alert( "Request failed: " + textStatus );
console.log(jqXHR);
});
req.always(function () {
console.log('Ajax complete!');
});
}
Here is the complete html after the ajax is complete:
<div class="row">
<div class="records table-responsive">
<table id="records-table" class="table table-bordered table-condensed table-striped table-hover tablesorter">
<tr>
<td>
10
</td>
<td>
2013-12-26 10:45:27
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
4
</td>
<td>
16
</td>
<td>
2
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Varkiza
</td>
<td>
Glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
9
</td>
<td>
2013-10-06 08:32:52
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
8
</td>
<td>
1
</td>
<td>
7
</td>
<td>
2
</td>
<td>
1
</td>
<td>
4
</td>
<td>
P.Falliro
</td>
<td>
Voula
</td>
<td>
2
</td>
</tr>
<tr>
<td>
6
</td>
<td>
2013-10-08 21:35:23
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
30
</td>
<td>
4
</td>
<td>
1
</td>
<td>
4
</td>
<td>
Mesogeiwn
</td>
<td>
Rafina
</td>
<td>
2
</td>
</tr>
<tr>
<td>
5
</td>
<td>
2013-10-10 15:19:45
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
15
</td>
<td>
2
</td>
<td>
13
</td>
<td>
4
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Gkazi
</td>
<td>
Ilioupoli
</td>
<td>
2
</td>
</tr>
<tr>
<td>
4
</td>
<td>
2013-10-08 14:26:47
</td>
<td>
YOE-1284
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
5
</td>
<td>
15
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
Peristeri
</td>
<td>
Gkizi
</td>
<td>
3
</td>
</tr>
<tr>
<td>
3
</td>
<td>
2013-10-08 07:49:22
</td>
<td>
XYZ-9870
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Alexia
</td>
<td>
Manda
</td>
<td>
20
</td>
<td>
3
</td>
<td>
17
</td>
<td>
2
</td>
<td>
3
</td>
<td>
1
</td>
<td>
Peiraias
</td>
<td>
Athina kedro
</td>
<td>
3
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2013-10-02 09:47:26
</td>
<td>
EYX-3464
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
35
</td>
<td>
2
</td>
<td>
1
</td>
<td>
2
</td>
<td>
kalamaki
</td>
<td>
glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2013-10-16 18:26:43
</td>
<td>
EYX-3464
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
50.9
</td>
<td>
20.9
</td>
<td>
30
</td>
<td>
1
</td>
<td>
2
</td>
<td>
2
</td>
<td>
braxami
</td>
<td>
megalo peuko
</td>
<td>
2
</td>
</tr>
</table>
</div>
</div>
UPDATE
Changing the code and using innerHTML instead of createElement seems to solve the issue and the ajax loaded table renders ok with all the bootstrap styles. However I don't know this doesn't happen with createELement.

Categories

Resources