Navigate through table TR with onkeydown or onkeyup - javascript

This is my current code:
Here I run some code and highlight the table row when the user clicks on the table row.
$("#orders tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
value = $(this).find('td:first').html();
});
table {
float: left;
border: 1px solid black;
border-collapse: collapse;
border-color: #a0a0a0ad;
}
table td {
padding: 5px;
}
table th {
background: #dcdcdc;
}
table tr {
height: 29px;
}
.selected {
background-color: #008cb9;
color: #FFF;
}
#orders {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
<thead>
<th>ID</th>
<th>Datum</th>
<th>Betaling</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I would like to be able to navigate through the table rows with upkey and downkey instead of clicking the table row; as well as call the method.
How am I able to do this?


You could add an event listner on the keydown then check if UP/Down keys are pressed and move the selected class to the next or previous tr :
$("#orders tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
value = $(this).find('td:first').html();
});
$(document).on('keydown', function(e) {
e.preventDefault();
if (e.which == 38) {
$('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');
} else if (e.which == 40) {
$('.selected').next('tr').addClass('selected').siblings().removeClass('selected');
}
$('html, body').scrollTop($('.selected').offset().top - 100);
/*$('.selected')[0].scrollIntoView({
behavior: "smooth",
block: "end"
});*/
});
table {
float: left;
border: 1px solid black;
border-collapse: collapse;
border-color: #a0a0a0ad;
}
table td {
padding: 5px;
}
table th {
background: #dcdcdc;
}
table tr {
height: 29px;
}
.selected {
background-color: #008cb9;
color: #FFF;
}
#orders {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
<thead>
<th>ID</th>
<th>Datum</th>
<th>Betaling</th>
</thead>
<tbody>
<tr class='selected'>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>


Here are the steps to achieve this.
Step-1. Track the keydown event on document
Step-2. Check for keyCode==38(up arrow) and keyCode==40(down arrow)
Step-3. If true add addClass('selected') on tr and remove from siblings() by removeClass('selected')
$("#orders tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
value = $(this).find('td:first').html();
});
$(document).on('keydown', function(e) {
e.preventDefault();
if (e.keyCode== 38) {
$('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');
} else if (e.keyCode== 40) {
$('.selected').next('tr').addClass('selected').siblings().removeClass('selected');
}
});
table {
float: left;
border: 1px solid black;
border-collapse: collapse;
border-color: #a0a0a0ad;
}
table td {
padding: 5px;
}
table th {
background: #dcdcdc;
}
table tr {
height: 29px;
}
.selected {
background-color: #008cb9;
color: #FFF;
}
#orders {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
<thead>
<th>ID</th>
<th>Datum</th>
<th>Betaling</th>
</thead>
<tbody>
<tr class='selected'>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>


$("#orders tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
value = $(this).find('td:first').html();
/// my code to show data and stuff
//////////////////////////
});
$('body').keyup(function(e) {
e.preventDefault();
if ($('.selected').length == 0) {
$($('tr')[1]).addClass('selected')
return;
}
if (e.which == 38) {
$('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');
}
if (e.which == 40) {
$('.selected').next('tr').addClass('selected').siblings().removeClass('selected');
}
})
table {
float: left;
border: 1px solid black;
border-collapse: collapse;
border-color: #a0a0a0ad;
}
table td {
padding: 5px;
}
table th {
background: #dcdcdc;
}
table tr {
height: 29px;
}
.selected {
background-color: #008cb9;
color: #FFF;
}
#orders {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
<thead>
<th>ID</th>
<th>Datum</th>
<th>Betaling</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
You can use the code as above!

Related

Copy, Drag and drop table cells only within a table column - JS

I have a table and I can only drag/drop cells across different columns. However, I want the functionality to copy the cell while dragging and dropping it in the same column. If a column already has a value, we need to replace that value with the pasted value. Please advice.
This is my code:
$(document).ready(function() {
$('.event-1').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function(event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('col-1'));
de = $('#' + data).detach();
de.appendTo($(this));
};
});
$('.event-2').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function(event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('col-2'));
de = $('#' + data).detach();
de.appendTo($(this));
};
});
})
table th,
table td {
height: 30px;
width: 200px;
}
table span {
display: block;
background-color: #09C;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="#our_table" border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr>
<td><span class="event-1" id="col-1" draggable="true">aaa</span></td>
<td></td>
<td></td>
</tr>
<tr>
<td>sample</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><span class="event-2" id="col-2" draggable="true">bbb</span></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Any help is appreciated.

Whenever any element is drag you can get index() of tdand tr tag and save them in setData() method . Now , when you are going to drop that element check if the td(where you need to drop) and td(from where span is taken) are same if they match simply get the data which is set in setData method using that data we can detach() that element and append to new td .
Demo Code :
$(document).on("dragstart", 'td span', function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).closest("td").index() + " , " + $(this).closest("tr").index()); //save index of td & tr
});
$('table td').on("dragenter dragover drop", function(event) {
event.preventDefault();
var index_ = $(this).index() //get index of td where we are dropping..
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text');
var new_data = data.split(",") //get data which is set
//check if the index of td from where span is taken and td where span is to drop is same..
if (new_data[0] == index_) {
$(this).text("") //clear if any text before...
de = $(`tr:eq(${new_data[1]}) td:eq(${new_data[0]}) span`).clone() //detach() //get that element
$(de[0]).appendTo($(this)); //append
}
};
});
table th,
table td {
height: 30px;
width: 200px;
}
table span {
display: block;
background-color: #09C;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="#our_table" border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr>
<td><span draggable="true">aaa</span></td>
<td></td>
<td></td>
</tr>
<tr>
<td>sample</td>
<td></td>
<td><span draggable="true">ccc</span></td>
</tr>
<tr>
<td></td>
<td><span draggable="true">bbb</span></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

highlighting the new drawn number

I would like to specify my page and add that only the latest generated number is highlighted. The current page highlights each number and I would like it to highlight only the latest number in the table and then go out, i.e. when the number 12 is drawn, the cell with the number 12 will be highlighted, and if the number is drawn 55 then 12 goes out and 55 lights up
jQuery(function ($) {
var bingo = {
selectedNumbers: [],
generateRandom: function () {
var min = 1; //Liczba początkowa
var max = 89; //Liczba końcowa
var random = Math.floor(Math.random() * (max - min + 1)) + min;
return random;
},
generateNextRandom: function () {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function () {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function () {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td").each(function () {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
});
window.onbeforeunload = function (e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl">
<head>
<title> Bingo</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br />
<div class="numbersTable">
<table>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
</div>
<br />
</div>
</body>
</html>
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,
tr,
td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}
a basic design in which each number highlights

You can do it like this: Instead of setting the inline style background-color: yellow, add a class to the newly appended cell. When the generate button is clicked, remove this class from all cells and add it only to the newly appended cell.
jQuery(function($) {
var bingo = {
selectedNumbers: [],
generateRandom: function() {
var min = 1; //Liczba początkowa
var max = 89; //Liczba końcowa
var random = Math.floor(Math.random() * (max - min + 1)) + min;
return random;
},
generateNextRandom: function() {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function() {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function() {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td.active").removeClass("active");
$("td").each(function() {
if ($(this).attr("CellValue") === random) {
$(this).addClass("active");
}
});
});
window.onbeforeunload = function(e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
.active {
background-color:yellow;
}
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,
tr,
td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl">
<head>
<title> Bingo</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br />
<div class="numbersTable">
<table>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
</div>
<br />
</div>
</body>
</html>

I would use a CSS class to make the highlighted number yellow:
.highlight {
background-color: yellow;
}
I would add that class to the cell that you want to highlight. It looks like you are looping through all td elements and finding the one with the right CellValue attribute. You can select that element using CSS selectors instead.
So try replacing this code:
$("td").each(function () {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
With:
$('.highlight').removeClass('highlight');
$('td[CellValue="' + random + '"]').addClass('highlight');
This would also remove the highlight class from the cell you first selected.
This is using CSS attribute selectors to target the correct cell. You can read more about CSS attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

The accepted answer is great. I just thought it would be fun to make a concise version of this with rando.js and jquery.
var ROWS = 10;
var COLS = 9;
$(document).ready(function() {
var htmlToAdd = "";
for (var i = 0; i < ROWS; i++) {
htmlToAdd += "<tr>";
for (var j = 0; j < COLS; j++) htmlToAdd += "<td style=\"width:" + 100 / COLS + "%;\">" + (i + (COLS + 1) * j) + "</td>";
htmlToAdd += "</tr>";
}
$("table").html(htmlToAdd);
});
function showNext() {
$(".highlighted").removeClass("highlighted");
if (pick = rando($("td").not(".shown")).value || false) $("#result").text(pick.addClass("shown").addClass("highlighted").text());
}
body{ padding:50px; text-align:center; }
#result{ font-size:96px; }
table{ border-collapse:collapse; width:100%; }
td{ color:transparent; border:1px solid #999; text-align:center; font-size:25px; }
td.shown{ color:black; }
td.highlighted{ background:yellow; }
button{ margin:20px 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://randojs.com/1.0.0.js"></script>
<div id="result">0</div>
<button onclick="showNext();">Show next</button>
<table></table>

How to hide element correctly in html tables

I would like to behind row2by default and by clicking tables,it will show itself.
When I try my work like below,row2 is behind. but the shape of tables distorted.
I would like to align tables and behind row2 by deafault.
How can I fix it ?
Why this table distorted?
Thanks
$(function() {
$("table").click(function() {
$("table tr:eq(1)").toggleClass('show');
});
});
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}
tr:nth-child(2):not([class]) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If you want to toggle the row, I suggest you have a concept of "hide", rather than "show".
Also, get rid of the second row header. Not sure why you need it, if you are spanning 2 rows.
$(() => {
$('table').click(function(e) {
$(this).find('tr:eq(1)').toggleClass('hide');
});
});
table, th, td {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0.25em;
}
th {
cursor: pointer
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody>
<tr>
<th rowspan="2">Header</th>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="hide">
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</tbody>
</table>

Increment value in table rows

How to increment value in table rows with each row having different values?
This is like a calendar. I have declared month and year and the first row is the days. So the second row will start from 2 because the month is set at 1 and the month + day - 1 + 1 = 2 and it will go until the last cell like 2,3,4,5,6. The third row will be from 21-25 because i want to sum month+day+last two digits of year - 1+1+19. I managed to find the table and increment but it goes down instead of right.
$('#table').find('td:nth-child(1)').each(function(i) {
var month = 1;
var y1 = 2019;
var y2 = 12;
var y3 = 19;
$(this).text(i + month);
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(1) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h2 id="Month">Month: 1</h2>
<span id="Year">Year: 2019</span>
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</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>
</body>
</html>

Do you mean some thing like this? I've add a thead and tbody element to easy select the rows. Then i take the whole first row and with in this i take all the cells nd ste the text. Hope it helps.
var year = 2019;
var month = 1;
$('#Month').text('Month: '+month);
$('#Year').text('Year: '+year);
for(var i=1; i<=$('#table thead th').length; ++i){
var day = parseInt($('#table thead th:nth-child('+i+')').text());
$('#table tbody tr:nth-child(1) td:nth-child('+i+')').text(day);
$('#table tbody tr:nth-child(2) td:nth-child('+i+')').text(day+month);
$('#table tbody tr:nth-child(3) td:nth-child('+i+')').text(day+month+(year%100));
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
thead {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h2 id="Month"></h2>
<span id="Year"></span>
<table id="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
</body>
<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>
</tbody>
</table>
</body>
</html>

I think you want something like this - iterating through rows and inside them through columns:
var j = 0;
$('#table tr').each(function(i) {
$(this).find("td").each( function() {
j++;
var month = 1;
var y1 = 2019;
var y2 = 12;
var y3 = 19;
$(this).text(j + month);
})
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(1) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h2 id="Month">Month: 1</h2>
<span id="Year">Year: 2019</span>
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</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>
</body>
</html>

How do I remove a row from a table

Below code removes the row if it contains an empty cell in the 3rd column.
It makes use of Jquery's fadeOut-method for a nice effect.
Thing is that I can't get the code working without the faeOut method.
I tried $(this).remove(); but that does not work.
function TT(){
var A = 3;
$('table tbody tr td:nth-child(' + A + ')').each(function(index){
var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
if (cellValue.length === 0){
$(this).parents('tr').fadeOut(function(){
$(this).remove();
});
}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>

Multiple times you are querying “table” .which is not required. Only the first loop to iterate through all 3rd column elements is sufficient to find out if the cell is empty and to remove the complete row.
function TT(){
var A = 4;
$('table tbody tr td:nth-child(' + A + ')')
.each(function(index){
if($(this).text()=="" ) {$(this).parent().remove();}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td>D6</td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>

No need to use .each() you can just use .filter()
function TT(){
var A = 3;
$('table tbody tr').filter(function(){
return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces
}).remove();
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
Note: parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start
from the <tr> not from the <td>
Another note: :nth-child(index) index starts from 1 .. and :eq(index) starts from 0

Categories

Resources