Update a table cell with a randomly generated number - javascript

I am very new to javascript. I have only been working with it for a week. I have been trying to update the html table column with a 0 value to a random number generated by javascript. This is what I have tried so far, with the function "plays", but it produces no output. What errors do I have and what am I missing from my code? Any help would be greatly appreciated.
<table class="content-table">
<tbody id="groupH" onload="plays()">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays(){
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random()* 10);
}
</script>


You can check it
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays(){
document.getElementById("updateDraw").innerHTML =
Math.floor(Math.random() * 10);
}
window.onload = function () {
plays();
}
</script>


There is no onload on a tbody element. This is raised when the window loads:
function plays() {
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
}
window.addEventListener("load", plays);
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>


Another way is to attach the onload call to the <body> tag:
<body onload="plays()">
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays() {
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
}
</script>
</body>

Related

Alternating color rows based on values of cells

I'd like to have a table with alternating colors of rows but rows with the same value should have unitary background color. Can I achieve such an effect with CSS?
Example:

JQuery
(feel free to simplify and edit this)
$(function() {
let elems = $('tr:not(".head")');
let count = 0;
for (let i=0; i<elems.length; i++) {
let el = $(elems[i]),
prev = $(elems[i-1]);
let isEven = (count % 2 == 0);
if (isEven) {
el.css('background', 'red');
} else {
el.css('background', 'yellow');
}
if (el.text() == prev.text()) {
let clr = prev.css('background');
el.css('background', clr);
} else {
count++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="head">
<th>One</th>
<th>Two</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
</table>

Get Data from HTML Table with Jquery (Or other ways if possible)

I have a really big HTML Table with data formatted like this (a simplified version of my table):
https://pastebin.com/K5UB4cGB
The list is much bigger.
I need to know which Application runs on which Server(multiple).
I now need to somehow get all the data and store it (maybe in an array) so I can work with it.
(For example I need to compare certain applications and write a code to document it.)
I've already tried many methods I found on the web but I not sure im working in the right way.
My recent atempt is:
var data = Array();
$("table").each(function(i, v) {
data[i] = Array();
$(this).each(function(ii, vv) {
data[i][ii] = $(this).text();
});
})
document.write(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>
Outputs:
1 2 3 4 6 7 8 9 10
With this method I get one array:
1,2,3,4,5,6,7,8,9,10
But I cannot access the stored vaules because for example data[0] outputs all the values and not only one.
Sorry for the long text
Thanks for your help :)
Kind Regards,
Markus

You can try using nested for loops and get a nested array of data.
let data = [];
$("table tr").each(function() {
let row = [];
$(this).children("td").each(function() {
row.push($(this).text());
})
data.push(row);
})
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

You need to iterate rows and within rows iterate cells
You can do this all with map()
var data = $('tr').map(function() {
return [$(this).children().map(function() {
return $(this).text().trim()
}).get()];
}).get();
console.log(JSON.stringify(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>

use each to loop through td and get its text value
var val=[]
$('#table td').each(function(e){
val.push($(this).text())
})
console.log(val)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

In the following I am using an each function to derive the data of the table and then pushing into an array list. I hope this code is helpful. This code is really small.
var arr = [];
$("th, td").each(function(){
arr.push($(this).text());
$("#result").text(arr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>

You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/

Jquery Multiple Table Rows Divide in separate Pages When Print

i have multiple table like these 1st table
2nd table
i want to divide these table rows in separate pages. each page contain 15 or 20 rows, after 1st table complete separating then the 2nd table will start.
these code repeat the head text on next page when print i want to remove it.
please help
jQuery(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("testInfoTable").length; i++) {
document.getElementsByClassName("testInfoTable")[i].style.pageBreakBefore = "always";
}
var div_pageBreaker = '<div style="page-break-before:always;"></div>';
var per_page = 15;
$('.testInfoTable').each(function(index, element) {
var pages = Math.ceil($(element).find('tbody tr').length / per_page);
if (pages == 1) {
return;
}
var table_to_split = $(element);
var current_page = 1;
for (current_page = 1; current_page <= pages; current_page++) {
var cloned_table = table_to_split.clone();
$('tbody tr', table_to_split).each(function(loop, row_element) {
if (loop >= per_page) {
$(row_element).remove();
}
});
$('tbody tr', cloned_table).each(function(loop, row_element) {
if (loop < per_page) {
$(row_element).remove();
}
});
if (current_page < pages) {
if (cloned_table.find('tbody tr').length > 0) {
$(element).find(".text").html("What");
$(cloned_table).find("h4").html("What");
$(div_pageBreaker).appendTo($(element));
$(cloned_table).appendTo($(element));
}
}
//make a break
table_to_split = cloned_table;
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<div>
<table class="testInfoTable">
<thead>
<tr><th> Table 1 Head 1</th> </tr>
<tr><th> <div>Table 1 Head 2</div></th> </tr>
<tr><th> <div>Table 1 Head 3</div></th> </tr>
<tr>
<th>
<h4 class="text">Head Text : Table 1</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>1</td> </tr>
<tr><td>3</td> <td>1</td> <td>1</td> </tr>
<tr><td>4</td> <td>1</td> <td>1</td> </tr>
<tr><td>5</td> <td>1</td> <td>1</td> </tr>
<tr><td>6</td> <td>1</td> <td>1</td> </tr>
<tr><td>7</td> <td>1</td> <td>1</td> </tr>
<tr><td>8</td> <td>1</td> <td>1</td> </tr>
<tr><td>9</td> <td>1</td> <td>1</td> </tr>
<tr><td>10</td> <td>1</td> <td>1</td> </tr>
<tr><td>11</td> <td>1</td> <td>1</td> </tr>
<tr><td>12</td> <td>1</td> <td>1</td> </tr>
<tr><td>13</td> <td>1</td> <td>1</td> </tr>
<tr><td>14</td> <td>1</td> <td>1</td> </tr>
<tr><td>15</td> <td>1</td> <td>1</td> </tr>
<tr><td>16</td> <td>1</td> <td>1</td> </tr>
<tr><td>17</td> <td>1</td> <td>1</td> </tr>
<tr><td>18</td> <td>1</td> <td>1</td> </tr>
<tr><td>19</td> <td>1</td> <td>1</td> </tr>
<tr><td>20</td> <td>1</td> <td>1</td> </tr>
<tr><td>21</td> <td>1</td> <td>1</td> </tr>
<tr><td>22</td> <td>1</td> <td>1</td> </tr>
<tr><td>23</td> <td>1</td> <td>1</td> </tr>
<tr><td>24</td> <td>1</td> <td>1</td> </tr>
<tr><td>25</td> <td>1</td> <td>1</td> </tr>
<tr><td>26</td> <td>1</td> <td>1</td> </tr>
<tr><td>27</td> <td>1</td> <td>1</td> </tr>
<tr><td>28</td> <td>1</td> <td>1</td> </tr>
<tr><td>29</td> <td>1</td> <td>1</td> </tr>
<tr><td>30</td> <td>1</td> <td>1</td> </tr>
<tr><td>31</td> <td>1</td> <td>1</td> </tr>
<tr><td>32</td> <td>1</td> <td>1</td> </tr>
</tbody>
</table>
<table class="testInfoTable">
<thead>
<tr><th> Table 2 Head 1</th> </tr>
<tr><th> <div>Table 2 Head 2</div></th> </tr>
<tr><th> <div>Table 2 Head 3</div></th> </tr>
<tr>
<th>
<h4 class="text">Head Text : Table 2</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>1</td> </tr>
<tr><td>3</td> <td>1</td> <td>1</td> </tr>
<tr><td>4</td> <td>1</td> <td>1</td> </tr>
<tr><td>5</td> <td>1</td> <td>1</td> </tr>
<tr><td>6</td> <td>1</td> <td>1</td> </tr>
<tr><td>7</td> <td>1</td> <td>1</td> </tr>
<tr><td>8</td> <td>1</td> <td>1</td> </tr>
<tr><td>9</td> <td>1</td> <td>1</td> </tr>
<tr><td>10</td> <td>1</td> <td>1</td> </tr>
<tr><td>11</td> <td>1</td> <td>1</td> </tr>
<tr><td>12</td> <td>1</td> <td>1</td> </tr>
<tr><td>13</td> <td>1</td> <td>1</td> </tr>
<tr><td>14</td> <td>1</td> <td>1</td> </tr>
<tr><td>15</td> <td>1</td> <td>1</td> </tr>
<tr><td>16</td> <td>1</td> <td>1</td> </tr>
<tr><td>17</td> <td>1</td> <td>1</td> </tr>
<tr><td>18</td> <td>1</td> <td>1</td> </tr>
<tr><td>19</td> <td>1</td> <td>1</td> </tr>
<tr><td>20</td> <td>1</td> <td>1</td> </tr>
<tr><td>21</td> <td>1</td> <td>1</td> </tr>
<tr><td>22</td> <td>1</td> <td>1</td> </tr>
<tr><td>23</td> <td>1</td> <td>1</td> </tr>
<tr><td>24</td> <td>1</td> <td>1</td> </tr>
<tr><td>25</td> <td>1</td> <td>1</td> </tr>
<tr><td>26</td> <td>1</td> <td>1</td> </tr>
<tr><td>27</td> <td>1</td> <td>1</td> </tr>
<tr><td>28</td> <td>1</td> <td>1</td> </tr>
<tr><td>29</td> <td>1</td> <td>1</td> </tr>
<tr><td>30</td> <td>1</td> <td>1</td> </tr>
<tr><td>31</td> <td>1</td> <td>1</td> </tr>
<tr><td>32</td> <td>1</td> <td>1</td> </tr>
</tbody>
</table>
<div id="appendTable"></div>
</div>
</body>
</html>

I believe this modification does what you want.
I changed the code so the cloned tables dont´t stays inside the original tables.
jQuery(document).ready(function () {
var per_page = 15;
$('.testInfoTable').each(function (index, element) {
var pages = Math.ceil($(element).find('tbody tr').length / per_page);
if (pages == 1) {
return;
}
var table_to_split = $(element);
var current_page = 1;
for (current_page = 1; current_page <= pages; current_page++) {
var cloned_table = $('<table><tbody>' + table_to_split.find('tbody').html() + '</tbody></table>');
cloned_table.addClass("testInfoTable cloned")
$('tbody tr', table_to_split).each(function (loop, row_element) {
if (loop >= per_page) {
$(row_element).remove();
}
});
$('tr', cloned_table).each(function (loop, row_element) {
if (loop < per_page) {
$(row_element).remove();
}
});
if (current_page < pages) {
table_to_split.after(cloned_table);
cloned_table.width(table_to_split.width());
}
table_to_split = cloned_table;
}
});
$('<tr><th colspan="3"><h4 class="text">Table Head</h4></th></tr>').prependTo('table.cloned')
});
table.testInfoTable {
page-break-before: always;
width: 200px;
}
table.testInfoTable td, table.testInfoTable th {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="PRINT" onclick="window.print();" />
<table class="testInfoTable">
<thead>
<tr><th colspan="3"> Table 1 Head 1</th> </tr>
<tr><th colspan="3"> <div>Table 1 Head 2</div></th> </tr>
<tr><th colspan="3"> <div>Table 1 Head 3</div></th> </tr>
<tr>
<th colspan="3">
<h4 class="text">Head Text : Table 1</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td><td>1</td></tr>
<tr><td>2</td><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
<tr><td>5</td><td>1</td><td>1</td></tr>
<tr><td>6</td><td>1</td><td>1</td></tr>
<tr><td>7</td><td>1</td><td>1</td></tr>
<tr><td>8</td><td>1</td><td>1</td></tr>
<tr><td>9</td><td>1</td><td>1</td></tr>
<tr><td>10</td><td>1</td><td>1</td></tr>
<tr><td>11</td><td>1</td><td>1</td></tr>
<tr><td>12</td><td>1</td><td>1</td></tr>
<tr><td>13</td><td>1</td><td>1</td></tr>
<tr><td>14</td><td>1</td><td>1</td></tr>
<tr><td>15</td><td>1</td><td>1</td></tr>
<tr><td>16</td><td>1</td><td>1</td></tr>
<tr><td>17</td><td>1</td><td>1</td></tr>
<tr><td>18</td><td>1</td><td>1</td></tr>
<tr><td>19</td><td>1</td><td>1</td></tr>
<tr><td>20</td><td>1</td><td>1</td></tr>
<tr><td>21</td><td>1</td><td>1</td></tr>
<tr><td>22</td><td>1</td><td>1</td></tr>
<tr><td>23</td><td>1</td><td>1</td></tr>
<tr><td>24</td><td>1</td><td>1</td></tr>
<tr><td>25</td><td>1</td><td>1</td></tr>
<tr><td>26</td><td>1</td><td>1</td></tr>
<tr><td>27</td><td>1</td><td>1</td></tr>
<tr><td>28</td><td>1</td><td>1</td></tr>
<tr><td>29</td><td>1</td><td>1</td></tr>
<tr><td>30</td><td>1</td><td>1</td></tr>
<tr><td>31</td><td>1</td><td>1</td></tr>
<tr><td>32</td><td>1</td><td>1</td></tr>
</tbody>
</table>
<table class="testInfoTable">
<thead>
<tr><th colspan="3"> Table 2 Head 1</th> </tr>
<tr><th colspan="3"> <div>Table 2 Head 2</div></th> </tr>
<tr><th colspan="3"> <div>Table 2 Head 3</div></th> </tr>
<tr>
<th colspan="3">
<h4 class="text">Head Text : Table 2</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td><td>1</td></tr>
<tr><td>2</td><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
<tr><td>5</td><td>1</td><td>1</td></tr>
<tr><td>6</td><td>1</td><td>1</td></tr>
<tr><td>7</td><td>1</td><td>1</td></tr>
<tr><td>8</td><td>1</td><td>1</td></tr>
<tr><td>9</td><td>1</td><td>1</td></tr>
<tr><td>10</td><td>1</td><td>1</td></tr>
<tr><td>11</td><td>1</td><td>1</td></tr>
<tr><td>12</td><td>1</td><td>1</td></tr>
<tr><td>13</td><td>1</td><td>1</td></tr>
<tr><td>14</td><td>1</td><td>1</td></tr>
<tr><td>15</td><td>1</td><td>1</td></tr>
<tr><td>16</td><td>1</td><td>1</td></tr>
<tr><td>17</td><td>1</td><td>1</td></tr>
<tr><td>18</td><td>1</td><td>1</td></tr>
<tr><td>19</td><td>1</td><td>1</td></tr>
<tr><td>20</td><td>1</td><td>1</td></tr>
<tr><td>21</td><td>1</td><td>1</td></tr>
<tr><td>22</td><td>1</td><td>1</td></tr>
<tr><td>23</td><td>1</td><td>1</td></tr>
<tr><td>24</td><td>1</td><td>1</td></tr>
<tr><td>25</td><td>1</td><td>1</td></tr>
<tr><td>26</td><td>1</td><td>1</td></tr>
<tr><td>27</td><td>1</td><td>1</td></tr>
<tr><td>28</td><td>1</td><td>1</td></tr>
<tr><td>29</td><td>1</td><td>1</td></tr>
<tr><td>30</td><td>1</td><td>1</td></tr>
<tr><td>31</td><td>1</td><td>1</td></tr>
<tr><td>32</td><td>1</td><td>1</td></tr>
</tbody>
</table>

How to select 5 successive rows

I got a table with several trs. I want to select 5 trs in a row and give them a background color, then take the next 5 trs and give them another background color - like even and odd, but with 5 elements as a block.
This is what I have tried
var trs = $('table.small-only tr');
for (var i = 1; i < trs.length; i += 5) {
if (i%2 == 0){
// select even blocks
}else {
// select odd blocks
}
}
This doesn't work though.
How can I select blocks containing 5 trs and give the even and odd blocks different background colors in a proper way?
I found a work around:
for (var i = 1; i < trs.length; i += 5) {
trs.slice(i, i + 5).wrapAll("<div></div>");
}
and
div {
&:nth-of-type(odd) {
background: #f2f2f2 !important;
}
}
But clearly putting divs around trs in a table isn't a good way.

Here is my example:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var my_table_rows= $('.my-table tr');
var color;
for (var i = 0; i < my_table_rows.length; i++){
if (i % 5 === 0) color = getRandomColor();
my_table_rows.eq(i).css('background', color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
</table>

To achieve this you can loop through the tr elements in the table stepping over the number of rows you want per group. You can then use slice() to retrieve the set number of rows before calling addClass() on them. Try this:
var groupSize = 5;
var classes = ['group1', 'group2'];
var $rows = $("table.small-only tr");
for(var i = 0; i < $rows.length; i += groupSize) {
$rows.slice(i, i + groupSize).addClass(classes[i / groupSize % classes.length]);
}
.group1 { background-color: #C00; }
.group2 { background-color: #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="small-only">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>

but clearly putting divs around trs in a table isnt a good way
No, it is invalid html. However you can use <tbody> instead of <div>
A table can have any number of <tbody> elements

You can do like that way
HTML
<table class="table">
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
Jquery
$(function(){
var limit = 5;
var arr = ['red','green','yellow','blue','orange'];
$('.table tr').each(function(i,e){
var ind = parseInt((i/limit));
$(this).css('background',arr[ind]);
})
})

You can also use CSS selector :nth-child(xn) and :not():
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {background-color:gray}
tr {
background: turquoise;
counter-increment: trs;
}
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {
background: tomato
}
/* check row numbers */
tr:before {
content: counter(trs);
display: table-cell;
padding: 0.25em;
border: solid;
background: yellow;
}
tr:nth-child(odd):before {
background: gray;
}
td {
padding: 0.25em;
border: solid;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

Categories

Resources