jquery calendar weekdays in table thead - javascript

Please help me to make simple month calendar using table.
here's the demo.
www.jsfiddle.net/pzdw0s2n/1/


document.addEventListener("DOMContentLoaded", function() {
daysOfTheWeek = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
var date = new Date();
var toDay = date.getDay();
var numDays = daysOfTheWeek.length;
th = '';
for(var i=0; i<numDays; i++) {
th += '<th>' + ( daysOfTheWeek[(i+toDay) % numDays] ) + '</th>';
}
document.getElementById('thead').innerHTML = th;
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table class="calendar" cellpadding="0" cellspacing="0">
<thead id="thead">
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>


Here is your JS generated calendar.
var months = new Date();
var days = new Date(months.getFullYear(),months.getMonth()+1, 0).getDate();
var table = document.createElement('table');
var y = 1;
var times = 1;
for(i=7; i<days; i+=5){
var tr = document.createElement('tr');
for(y; y<=(7)*times; y++){
if(y<=31){
var td = document.createElement('td');
$(td).text(y);
$(tr).append(td);
}
}
times++;
$(table).append(tr);
}
$('body').append(table);
The Code gets current months and calculates how many days in it. Then with some for loops it is writing them into a table.

Related

make table display part to part

I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it?
I have tried this js code with event fadeIn() but not working:
$.fn.slide=function(){
var self=this,kids=self.children()
setInterval(function(){
kids.filter(':hidden').fadeIn()
$(this).appendTo(self)
kids=self.children()
},1000)
return this
}
$(function(){
$('tbody').slide()
})
My html:
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Like first display rows from 1->8 and after that delete it, display from 9->16.

The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setInterval(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Instead if you need just one time slide you need setTimeout like:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setTimeout(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Reference:
setInterval
setTimeout

Dragging & drop working oddly with vanilla JS when table is too large

I have taken some Javascript code for dragging and dropping rows in a HTML table from this link below and adapted it to my personal project. But after some time, I came to notice an unexpected behaviour when the table is too large, in fact when it is vertically larger than the viewport size.
The unexpected behaviour is that when both these conditions are met:
the table has many rows
you have scrolled down
Then, the row being dragged is not under the cursor, but at some distance which I presumably suspect equal to the difference between the top of the page and the top of the viewport.
An image will illustrate the problem here:
As you can see the row maintains a vertical distance some pixels above the cursor in every moment while being dragged.
I believe this line to be the cause of the problem:
draggingEle.style.top = `${draggingEle.offsetTop + e.clientY - y}px`;
given that offsetTop is relative to only the viewport dimensions, but I can't find any attribute similar relative to the whole page and anything I'm trying does not work out (tried things like top, offsetHeight, pageY, screenY in several elements there).
The code is this:
document.addEventListener('DOMContentLoaded', function () {
const table = document.getElementById('table');
let draggingEle;
let draggingRowIndex;
let placeholder;
let list;
let isDraggingStarted = false;
// The current position of mouse relative to the dragging element
let x = 0;
let y = 0;
// Swap two nodes
const swap = function (nodeA, nodeB) {
const parentA = nodeA.parentNode;
const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;
// Move `nodeA` to before the `nodeB`
nodeB.parentNode.insertBefore(nodeA, nodeB);
// Move `nodeB` to before the sibling of `nodeA`
parentA.insertBefore(nodeB, siblingA);
};
// Check if `nodeA` is above `nodeB`
const isAbove = function (nodeA, nodeB) {
// Get the bounding rectangle of nodes
const rectA = nodeA.getBoundingClientRect();
const rectB = nodeB.getBoundingClientRect();
return rectA.top + rectA.height / 2 < rectB.top + rectB.height / 2;
};
const cloneTable = function () {
const rect = table.getBoundingClientRect();
const width = parseInt(window.getComputedStyle(table).width);
list = document.createElement('div');
list.classList.add('clone-list');
list.style.position = 'absolute';
list.style.left = `${rect.left}px`;
list.style.top = `${rect.top}px`;
table.parentNode.insertBefore(list, table);
// Hide the original table
table.style.visibility = 'hidden';
table.querySelectorAll('tr').forEach(function (row) {
// Create a new table from given row
const item = document.createElement('div');
item.classList.add('draggable');
const newTable = document.createElement('table');
newTable.setAttribute('class', 'clone-table');
newTable.style.width = `${width}px`;
const newRow = document.createElement('tr');
const cells = [].slice.call(row.children);
cells.forEach(function (cell) {
const newCell = cell.cloneNode(true);
newCell.style.width = `${parseInt(window.getComputedStyle(cell).width)}px`;
newRow.appendChild(newCell);
});
newTable.appendChild(newRow);
item.appendChild(newTable);
list.appendChild(item);
});
};
const mouseDownHandler = function (e) {
// Get the original row
const originalRow = e.target.parentNode;
draggingRowIndex = [].slice.call(table.querySelectorAll('tr')).indexOf(originalRow);
// Determine the mouse position
x = e.clientX;
y = e.clientY;
// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
if (!isDraggingStarted) {
isDraggingStarted = true;
cloneTable();
draggingEle = [].slice.call(list.children)[draggingRowIndex];
draggingEle.classList.add('dragging');
// Let the placeholder take the height of dragging element
// So the next element won't move up
placeholder = document.createElement('div');
placeholder.classList.add('placeholder');
draggingEle.parentNode.insertBefore(placeholder, draggingEle.nextSibling);
placeholder.style.height = `${draggingEle.offsetHeight}px`;
}
// Set position for dragging element
draggingEle.style.position = 'absolute';
draggingEle.style.top = `${draggingEle.offsetTop + e.clientY - y}px`;
draggingEle.style.left = `${draggingEle.offsetLeft + e.clientX - x}px`;
// Reassign the position of mouse
x = e.clientX;
y = e.clientY;
// The current order
// prevEle
// draggingEle
// placeholder
// nextEle
const prevEle = draggingEle.previousElementSibling;
const nextEle = placeholder.nextElementSibling;
// The dragging element is above the previous element
// User moves the dragging element to the top
// We don't allow to drop above the header
// (which doesn't have `previousElementSibling`)
if (prevEle && prevEle.previousElementSibling && isAbove(draggingEle, prevEle)) {
// The current order -> The new order
// prevEle -> placeholder
// draggingEle -> draggingEle
// placeholder -> prevEle
swap(placeholder, draggingEle);
swap(placeholder, prevEle);
return;
}
// The dragging element is below the next element
// User moves the dragging element to the bottom
if (nextEle && isAbove(nextEle, draggingEle)) {
// The current order -> The new order
// draggingEle -> nextEle
// placeholder -> placeholder
// nextEle -> draggingEle
swap(nextEle, placeholder);
swap(nextEle, draggingEle);
}
};
const mouseUpHandler = function () {
// Remove the placeholder
placeholder && placeholder.parentNode.removeChild(placeholder);
draggingEle.classList.remove('dragging');
draggingEle.style.removeProperty('top');
draggingEle.style.removeProperty('left');
draggingEle.style.removeProperty('position');
// Get the end index
const endRowIndex = [].slice.call(list.children).indexOf(draggingEle);
isDraggingStarted = false;
// Remove the `list` element
list.parentNode.removeChild(list);
// Move the dragged row to `endRowIndex`
let rows = [].slice.call(table.querySelectorAll('tr'));
draggingRowIndex > endRowIndex
? rows[endRowIndex].parentNode.insertBefore(rows[draggingRowIndex], rows[endRowIndex])
: rows[endRowIndex].parentNode.insertBefore(
rows[draggingRowIndex],
rows[endRowIndex].nextSibling
);
// Bring back the table
table.style.removeProperty('visibility');
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
table.querySelectorAll('tr').forEach(function (row, index) {
// Ignore the header
// We don't want user to change the order of header
if (index === 0) {
return;
}
const firstCell = row.firstElementChild;
firstCell.classList.add('draggable');
firstCell.addEventListener('mousedown', mouseDownHandler);
});
});
.table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #ccc;
}
.table th,
.table td {
padding: 0.5rem;
}
.draggable {
cursor: move;
user-select: none;
}
.placeholder {
background-color: #edf2f7;
border: 2px dashed #cbd5e0;
}
.clone-list {
border-top: 1px solid #ccc;
}
.clone-table {
border-collapse: collapse;
border: none;
}
.clone-table th,
.clone-table td {
border: 1px solid #ccc;
border-top: none;
padding: 0.5rem;
}
.dragging {
background: #fff;
border-top: 1px solid #ccc;
z-index: 999;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML DOM - Drag and drop table row</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/demo.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"
/>
</head>
<body>
<div style="padding: 4rem 0">
<table id="table" class="table">
<thead>
<tr>
<th data-type="number">No.</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
</tr>
<tr>
<td>4</td>
<td>Vanessa</td>
<td>Roberts</td>
</tr>
<tr>
<td>5</td>
<td>Oliver</td>
<td>Alsop</td>
</tr>
<tr>
<td>6</td>
<td>Jennifer</td>
<td>Forsyth</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>King</td>
</tr>
<tr>
<td>8</td>
<td>Steven</td>
<td>Kelly</td>
</tr>
<tr>
<td>9</td>
<td>Julian</td>
<td>Ferguson</td>
</tr>
<tr>
<td>10</td>
<td>Chloe</td>
<td>Ince</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How do you use Javascript to change the background on a html Table

HTML Table that is happening now
I'm trying to take this HTLM table with numbers on it the first column added to the second equals the third. some of the sum column are not correct. the correct answer is in the fourth column. I need to use Javascript to change the background color of the rows that are not correct and add in the correct number? This is what I have so far? The attached picture is what is coming up to far.
This picture is what the HTML Table is supposed to look like
Please help
for (var m = 0; m < math.length; m++) {
// math[m][0] = the first element of the m-th array (indices start at 0)
// math[m][1] = the second element of the m-th array
// math[m][2] = the third element of the m-th array
document.write(math[m][0] + ' + ' + math[m][1] + ' = ' + math[m][2] + "<br>" +' Actual answer = '+ (math[m][0]+ math[m][1])+ "<br>");
}
</script>
<table class="mathTable" id="math" style="width:80%"; border="1em";>
<tr>
<th>1st Number</th>
<th>2nd Number</th>
<th>Answer</th>
<th>Actual Answer</th>
</tr>
<tr class='calculation'>
<td>5</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>7</td>
<td>6</td>
<td>13</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>3</td>
<td>13</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>4</td>
<td>7</td>
<td>11</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>3</td>
<td>9</td>
<td>12</td>
<td>12</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>5</td>
<td>12</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>2</td>
<td>6</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>9</td>
<td>14</td>
<td>14</td>
</tr>
<tr class='calculation'>
<td>6</td>
<td>6</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
Thank you

Tables are made up of rows and cells.
It's a good idea to use the thead and tbody tags in your table,
and recommended to separate the css from the body elements
to change the background color: add a class to the element with the chosen color
const tableMath = document.getElementById('table-math');
for (let line=1; line < tableMath.rows.length; line++)
{
if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
{
tableMath.rows[line].cells[3].classList.add('badAnswer')
}
}
table {
border-collapse: collapse;
width: 80%;
margin: 1em;
}
td,th {
border: solid grey 1px;
padding: 5px;
}
th {
background-color: #7fffd5;
}
td {
text-align: center;
}
.badAnswer {
background-color: #f47c6f;
}
<table id="table-math">
<thead>
<tr>
<th> 1st Number </th>
<th> 2nd Number </th>
<th> Answer </th>
<th> Actual Answer </th>
</tr>
</thead>
<tbody>
<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>
<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
</tbody>
</table>

How to find value in row of table using jquery or javascript?

i want to find value in row of table. Sample , i have a this case
$("tr[id*='row']").each(function (i, el) {
//if($this.value() >10)
//console.log('This value in cell is: ' + this.value);
});
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
In this case above , i want to compare and show the value in cell, which more than 10, but i confused in define the value in cell. Mabe you can give me adviced for this case .

Use find for td values.
$("tr[id*='row']").find('td').each(function(i, el) {
var val = $(this).text();
if (val > 10)
console.log('This value in cell is: ' + $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

$(document).ready(function(){
$("tr[id*='row']").each(function () {
var td = $(this).find("td");
var countdeeptd = td.length;
td.each(function(i,el){
if(td.eq(i).text() > 10)
console.log('This value in cell is: ', td.eq(i).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

Select random visible row from table and clone it (with JS/jQuery)

I'm trying to get one random row from an array which is composed of 100 rows. Some are hidden, other are visible.
My aim is to get a random visible row, and clone it in another table. (visible and hidden row are classified, that's why I need that !)
My code:
<table id="Random">
</table>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
<script>
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length) + 1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
$("#Random").html(identifiedRow);
</script>

Here you go with a solution https://jsfiddle.net/1hok7xme/
$("#Random").html("");
$('#Classified tr').each(function(){
if($(this).is(':visible')){
$("#Random").append(`<tr>${$(this).html()}</tr>`);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random Table:
<table id="Random">
</table>
<br/>
Classified Table:
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
Hope this will help you.

Your issue is in these lines:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length)+1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
Change them to:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd)[0];
jQuery .eq() requires an integer indicating the 0-based position of the element.
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd);
//$("#Random").html(identifiedRow);
$("#Random").append(identifiedRow.clone());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random table: <br/>
<table id="Random">
</table>
Classified table: <br/>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>

Ok, got it ! Thanks to everyone. Each+Array. ;)
var arrayTmp = [];
var i = 0;
$('.Monstres tbody tr').each(function(){
if($(this).is(':visible')){
arrayTmp[i] = '<tr>'+$(this).html()+'</tr>';
i++;
}
});
var arrayTmp = arrayTmp[Math.floor(Math.random()*arrayTmp.length)];
$(".Random table").append(arrayTmp);

Categories