bootstrap table ajax not loading styles - javascript

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.

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

Copying table data into javascript json object within page

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>

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.

jQuery function if else - too fast?

I have a basic function which is making a change to cell colors in a table.
I am getting values from a Slider and trying to color cells in a table as if they were tracking the slider. It is half working but does not keep up with the slider or is too fast.
To me it seems that myFunction() is executing more than once per step of the slider whereas it should only fire when the slider value changes...
Here's the code:
var p =0;
function myFunction()
{
var SliderValue = $('#slider-step').val();
var k = Math.floor(SliderValue/10);
if (p == k) {
$('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#F0B4F8");
console.log("SliderValue--->" + SliderValue + " k = " + k + " p = " + p);
p = 0;
}
else {
$('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#FFFFFF");
console.log("SliderValue--->" + SliderValue + " k = " + k + " p = " + p);
p = k;
}
}
CSS:
#grid, #grid td {
border: 1px solid black;
background-color: yellow;
}
#grid td {
width: 25px;
height: 10px;
}
#grid td, th {
border-left: solid 3px black;
}
HTML: Table:
<table class="grid" id="grid" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
HTML: Slider:
<label for="slider-step">
Position
</label>
<input type="range" name="slider-step" id="slider-step" value="0" min="0"
max="100" step="6.4" class="ui-hidden-accessible" onchange="myFunction()">

Perhaps this will get you on the right track. Fiddle
First notice on the fiddle the slider step is 10, to match the division by 10 in the code. Then I've changed it to use p to store the last value of the slider. This allows for comparison to the current value, and you can color it appropriately as it slides up or down.
var p =0;
function myFunction()
{
var SliderValue = $('#slider-step').val();
var k = Math.floor(SliderValue/10);
// if the value is decreasing
if (p >= k) {
$('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#F0B4F8");
console.log("SliderValue--->" + SliderValue + " k = " + k + " p = " + p);
// otherwise it's increasing
} else {
$('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#FFFFFF");
console.log("SliderValue--->" + SliderValue + " k = " + k + " p = " + p);
}
// save value for comparison next time
p = k;
}

Categories

Resources