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

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>

Related

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>

jQuery: How to get the col and row headers for selected cell

I'm currently working on a JavaFX Project which has a WebView. The Html Code is builded by a String Builder.
I want to get the column and row headers of the selected cell.
I need them for my Java Code.
The current state of the WebPage you'll find in the following example.
Here the code:
$(document).ready(function() {
$("td").click(function() {
$("td.selected").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1'>
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The CSS you can see in the jsfiddle

The hard part is getting the column header and row header, this can be achieved with by referencing the table parent and then the specific column/row of the clicked element.
var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];
Once you have those elements you can easily measure the width and height using $(element).height(); and $(element).width();.
Let me know if this works for you.
$(document).ready(function() {
$('table').on('click', 'td', function(e) {
var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];
console.log(rowHeader)
console.log(columnHeader)
var rowHeadWidth = $(rowHeader).width();
var rowHeadHeight = $(rowHeader).height();
var columnHeadWidth = $(columnHeader).width();
var columnHeadHeight = $(columnHeader).height();
console.log("row header dimensions are: " + rowHeadWidth + " x " + rowHeadHeight)
console.log("column header dimensions are: " + columnHeadWidth + " x " + columnHeadHeight)
$("td.selected").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1'>
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

my idea with jquery.
$(document).ready(function () {
$("td").click(function(){
$("td.selected").removeClass("selected");
$(this).addClass("selected");
let rootMe = $(this).parents()[0];
let spanValue = Number($(this).attr('colspan')) || 1;
getCurrentTHhtml(rootMe, spanValue);
});
function getTH(){
let allTHValue = [];
let column1 = $('#bookingTable tr').eq(0).find('th');
column1.each(function(){
allTHValue.push($(this).html());
});
return allTHValue;
}
function getCurrentTHhtml(rootMe, spanValue){
let inMe = rootMe.children;
let j;
let p = 0;
let myPoint;
let allColsInRow = rootMe.children.length;
let thValues = getTH();
let result = [];
for(j=0;j<inMe.length;j++){
if(inMe[j].localName === 'td'){
if(inMe[j].classList[0] === "selected"){
myPoint = p;
}
p++;
}
}
p=0;
for(j=myPoint;j<allColsInRow;j++){
if(p<spanValue)
result.push(thValues[j]);
p++;
}
console.log(result);
console.log(inMe[0]);
}
});
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td:hover, td.selected {
background-color: #FF9900
}
th[scope="col"] {
background-color: #696969;
color: #fff;
}
th[scope="row"] {
background-color: #d7d9f2;
}
caption {
padding: 10px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1' >
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Navigate through table TR with onkeydown or onkeyup

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!

CSS adding automating number for each row

I have a table that i want to add automatic number for each row. I want the to appear on the second column.
This must be a straight forward thing to do, but just couldn't figure it out.i have follow the direction from Automatic Serial Number Row in HTML Table
but this only appear on the first column. i want that to appear on the second td:

Then use :nth-child psuedo selector, or you can use javascript to iterate over the rows and add the number to one of the cells. Both options are below:
document.querySelectorAll('table').forEach(function(table) {
var index = 1;
table.querySelectorAll('tr').forEach(function(row) {
row.querySelectorAll('td').forEach(function(column, position) {
if (position === 1) {
column.innerHTML = '' + index;
index++;
}
});
});
});
table{
counter-reset: serial-number; /* Set the serial number counter to 0 */
}
tr td:nth-child(3):before {
counter-increment: serial-number; /* Increment the serial number counter */
content: counter(serial-number); /* Display the counter */
}
<table>
<tr>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
<tr>
<td>F</td>
<td></td>
<td></td>
</tr>
<tr>
<td>G</td>
<td></td>
<td></td>
</tr>
</table>

how to join rows in table [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm looking for help with my project.I want to convert my HTML table
from:
A B C D E F
217 x
221 x
275 x
275 x
290 x x
to:
A B C D E F
217 x
221 x
275 x x
290 x x
In the first table there are 2 rows with number 275,How do I merge them together ?

For html table use a hashmap to track unique rows as you loop through the rows once. As duplicates are found you merge the text with stored row and remove the duplicate
var uniqueRows = {};
$('tbody tr').each(function(){
var $row = $(this),
num = $row.find('td:first').text().trim();
if(!uniqueRows[num]){
// store this row object for future text merge
uniqueRows[num] = $row
}else{
// match found, merge the text
uniqueRows[num].find('td').text(function(i, existText){
return existText ? existText : $row.find('td').eq(i).text()
});
$row.remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
</th>
<th>A
</th>
<th>B
</th>
<th>C
</th>
<th>D
</th>
<th>E
</th>
<th>F
</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Third alternative - saving the content and rewriting
$(function() {
let cont = {};
$("table>tbody>tr").each(function(_, row) {
var key = $("td:first", row).text();
if (cont[key] == undefined) cont[key] = [];
$("td", row).each(function(i,cell) {
let text = $.trim(cell.innerText);
if (cont[key][i] == undefined || cont[key][i] =="") cont[key][i] = text;
});
});
$("table>tbody").empty();
$.each(cont,function(key,arr) {
$("table>tbody").append("<tr><td>"+arr.join("</td><td>")+"</td></tr>");
})
});
td {
border: 1px solid black
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td> </td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td> </td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td> </td>
<td></td>
<td>x</td>
<td> </td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>

Try the following:
It will search for duplicated words in the first td in each tr. If match then it will move the content to the first tr and then remove the duplicated tr
var arr = [];
$("table tbody tr").each(function() {
arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
$.each(results, function(i, x) {
var tr = $("table tbody tr td:contains(" + x + "):first").parent()
$(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
var s = $(l).parent();
$(s).children("td").each(function(t, u) {
if ($(u).text() == "x") {
var td = $(tr).find("td:eq(" + t + ")")
td.text(td.text() + $(u).text())
}
})
s.remove();
})
})
var arr = [];
$("table tbody tr").each(function() {
arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
$.each(results, function(i, x) {
var tr = $("table tbody tr td:contains(" + x + "):first").parent()
$(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
var s = $(l).parent();
$(s).children("td").each(function(t, u) {
if ($(u).text() == "x") {
var td = $(tr).find("td:eq(" + t + ")")
td.text(td.text() + $(u).text())
}
})
s.remove();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
</th>
<th>A
</th>
<th>B
</th>
<th>C
</th>
<th>D
</th>
<th>E
</th>
<th>F
</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Categories

Resources