how to highlight table cells in a certain way when hover over - javascript

I need to highlight table cells with 'J' mark like this:
In this picture I hover over a cell (the one that has a black border) and certain cells around it changes color. How to do this? I only can change a single cell, row or column.
td {
padding: 8px;
background-color: #fff;
font-weight: bold;
}
tr:hover {
color: #fff;
background-color: #000;
}
tr:hover td {
background-color: transparent;
}
<table>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>


The solution that I am proposing using jQuery in order to link an event on every td:hover. By using each, hover, Math.floor and toggleClass you can easily achieve what you want to do.
$(function() {
$('#my-table td').each(function(index, elem){
$("#" + elem.id).hover(function(){
row_index = Math.floor((elem.id - 1) / 5);
col_index = (elem.id - 1) % 5;
right_cell_col = col_index + 1;
top_cell_index = parseInt(elem.id) - 4;
left_cell_col = col_index - 1;
bottom_cell_index = parseInt(elem.id) + 5;
if(left_cell_col >= 0) $("#" + (elem.id - 1)).toggleClass("colored");
if(right_cell_col <= 4) {
if (top_cell_index > 0) $("#" + top_cell_index).toggleClass("colored");
$("#" + (parseInt(elem.id) + 1)).toggleClass("colored");
}
if(bottom_cell_index < 26) $("#" + bottom_cell_index).toggleClass("colored");
});
});
});
td {
width: 10px;
height: 10px;
border: 1px solid #ddd;
padding: 8px;
background-color: #fff;
font-weight: bold;
}
td:hover {
border-color: black;
font-weight: bold;
}
.colored {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table">
<tr>
<td id=1></td>
<td id=2></td>
<td id=3></td>
<td id=4></td>
<td id=5></td>
</tr>
<tr>
<td id=6></td>
<td id=7></td>
<td id=8></td>
<td id=9></td>
<td id=10></td>
</tr>
<tr>
<td id=11></td>
<td id=12></td>
<td id=13></td>
<td id=14></td>
<td id=15></td>
</tr>
<tr>
<td id=16></td>
<td id=17></td>
<td id=18></td>
<td id=19></td>
<td id=20></td>
</tr>
<tr>
<td id=21></td>
<td id=22></td>
<td id=23></td>
<td id=24></td>
<td id=25></td>
</tr>
</table>


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
border: 1px solid #000;
}
table td {
border: 1px solid #000;
}
td {
text-align: center;
font-size: 0;
width: 30px;
height: 30px;
background-color: #fff;
font-weight: bold;
}
tr.hover {
color: #fff;
background-color: #000;
}
/* tr:hover td {
background-color: transparent;
} */
td.hover {
color: #fff;
background-color: #000;
}
td.center {
color: #fff;
background-color: #fff;
outline: 2px red solid;
}
</style>
<script>
$(document).ready(function() {
var HEIGHT = 5;
var WIDTH = 5;
$('td').hover(function() {
var self = $(this);
var table = self.parent().parent();
var column = self.index();
var row = self.parent().index();
var current = table.find(`tr:eq(${row}) td:eq(${column})`)
current.toggleClass('center')
if (column > 0) {
var before = table.find(`tr:eq(${row}) td:eq(${column - 1})`)
before.toggleClass('hover');
}
if (row < HEIGHT - 1) {
var bottom = table.find(`tr:eq(${row + 1}) td:eq(${column})`)
bottom.toggleClass('hover');
}
if (column < WIDTH - 1) {
var next = table.find(`tr:eq(${row}) td:eq(${column + 1})`)
next.toggleClass('hover');
}
if (row > 0 && column < WIDTH - 1) {
var nextUp = table.find(`tr:eq(${row - 1}) td:eq(${column + 1})`)
nextUp.toggleClass('hover');
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</body>
</html>
How about using jquery?

Related

Why doesn't my click handler show the correct table element?

I have JavaScript code which on button click shows its table. I have 4 buttons (and tables, obviously). Probably there will be more, so making function to each one of them will be bad idea. That being said, I made this code below to slightly minimize the amount of code. But, it doesn't work, and I don't quite understand why.
document.addEventListener('DOMContentLoaded', function() {
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab3 = document.getElementById('tab3');
const tab4 = document.getElementById('tab4');
const currentTable = ".table";
const tables = Array.from(document.querySelectorAll(currentTable))
const table1 = document.querySelector('.table1');
const table2 = document.querySelector('.table2');
const table3 = document.querySelector('.table3');
const table4 = document.querySelector('.table4');
//this doesnt work
function showTable(e) {
const target = e.target;
if (!target || !target.matches(currentTable)) {
return;
}
tables.forEach(elem => elem.classList.remove('active'));
tables.forEach(elem => elem.classList.remove('op'));
e.target.classList.add('active');
setTimeout(function() {
e.target.classList.add('op');
}, 20);
};
tab1.addEventListener('click', showTable(table1));
tab2.addEventListener('click', showTable(table2));
tab3.addEventListener('click', showTable(table3));
tab4.addEventListener('click', showTable(table4));
});
//this one for buttons
document.addEventListener('DOMContentLoaded', function() {
const selector = '.table_option';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('.table-nav');
function makeActive(e) {
const target = e.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
e.target.classList.add('active');
};
navigation.addEventListener('click', makeActive);
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>
Where am I wrong? Can someone point me to the problem I am facing?

I like to take a simple index-based approach to things like this. If that doesn't suit, you could add indices to the tables using data attributes which correspond to tab index.
Some other tips...
You were creating event listeners in every call of showTable(). That would result in a pile of event handlers you don't want.
You were using a rather roundabout way to collect elements (with Array.from(). That's not needed.
Multiple classes can be added and removed as a list.
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.table_option');
const tables = document.querySelectorAll('.table');
tabs.forEach(tab => {
tab.addEventListener('click', e => {
const tabEl = e.currentTarget.parentNode;
const tabIndex = [...tabEl.parentNode.children].indexOf(tabEl);
showTable(tabIndex);
});
});
const showTable = index => {
tables.forEach(elem => elem.classList.remove('active', 'op'));
tables[index].classList.add('active');
setTimeout(() => {
tables[index].classList.add('op');
}, 20);
tabs.forEach(elem => elem.classList.remove('active', 'op'));
tabs[index].classList.add('active');
}
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>

:nth-child(even) selector by class with specific elements [duplicate]

This question already has answers here:
Excluding an element from nth-child pattern
(5 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have a table that has a light gray background for the even rows and white for the odd ones. it works perfectly by using .tr:nth-child(even) {}
HTML
<table>
<tr></tr>
<tr class="hidden"></tr>
<tr class="hidden"></tr>
<tr></tr>
</table>
CSS
tbody tr:nth-of-type(even) {
background-color: var(--bg);
}
I made a search field that filters table rows by adding hidden class for tr elements that not match after that the tr:nth-child(even) doesn't work.
I tried to add search-result class on the elements that match and then I made tr:nth-of-type(even) { .... }, also that not worked.
Is there any way that I can do that? for example, a way to select even elements by class?

Fixed version of the codepen in the comments using a variant of the proof of concept I have at the bottom. Count up indexes to check if even, excluding elements with display:none, done every update. This may need to be optimized for very large tables.
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
//let table = document.getElementsByTagName('table')[0]
(function(){
let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
el.style.display !== 'none' && i++ % 2 === 0 ? el.classList.add('even') : el.classList.remove('even'))
})()
}
* {
box-sizing: border-box;
}
#input {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#table {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
}
#table tr {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #fff;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
}
#table th, #table td {
text-align: left;
padding: 12px;
}
#table tr :not(td) {
background-color: #424242;
color: white;
}
#table tr:not(.even) {
background-color: #eee!important;
}
<input type="text" id="input" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="table">
<tr>
<th style="width:60%;">Name</th>
<th style="width:40%;">Age</th>
</tr>
<tr>
<td>Adam</td>
<td>22</td>
</tr>
<tr>
<td>malik</td>
<td>40</td>
</tr>
<tr>
<td>Asal</td>
<td>32</td>
</tr>
<tr>
<td>Asal</td>
<td>26</td>
</tr>
<tr>
<td>Asali</td>
<td>40</td>
</tr>
<tr>
<td>malik</td>
<td>40</td>
</tr>
<tr>
<td>maaaalik</td>
<td>40</td>
</tr>
</table>
select non-hidden and use counter to find even. add class.
let table = document.getElementsByTagName('table')[0]
let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
i++ % 2 === 0 && el.classList.add('even'))
.even {
background-color: red;
}
.hidden {
opacity: 0.2;
}
<table>
<tr>
<td>1</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>

How to grey out in html tables

When I try to create html tables,I wonder How I can greyout unseected cells.
When I click cell 2,my desired result is like below.
I tried like below code. If there is more sophisticated method for greyout Please let me know.
Thanks
var $ = jQuery;
$('td').on('click', function(e) {
e.preventDefault();
$('table').toggleClass('greyout');
})
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>

You need to apply the class to all cells except the one which was clicked, so use the not() method. Also note that to enable subsequent clicks you need to remove that class from any td elements before adding it to the next set.
In addition note that preventDefault() is redundant on a td click handler as there is no default action to prevent. Also, if you want to alias $ use the argument in the document.ready handler.
With all that said, try this:
jQuery($ => {
let $td = $('td').on('click', function() {
$td.removeClass('greyout').not(this).addClass('greyout');
})
});
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>

I would go for the following logic:
$mainTable = $('table');
$mainTable.on('click', 'td', function(){
if( this.classList.contains('selected') ){
$(this).removeClass('selected')
} else{
$mainTable.find('.selected').removeClass('selected');
$(this).addClass('selected')
}
$mainTable.toggleClass('withSelectedOption', $mainTable.find('.selected').length !== 0);
});
table td{
background: aqua;
padding: 10px;
}
table.withSelectedOption td{
background: grey;
}
table.withSelectedOption td.selected{
background: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>

How to get the value of clicked <td> inside an input field in jquery?

$(document).ready(function() {
$("td").on("click", function() {
var tdval, inputval, editdiv = "";
editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$(this).find(".input").length) {
tdval = $(this).text();
$(this).html(editdiv);
$('.input').val(tdval);
$(".input").focus();
$(document).on('click', '.submit', function(event) {
inputval = $(".input").val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
}
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
I am trying to build a dynamic table and I want to have edit option for each <td> in each row. But Whenever I click multiple <td> to edit I am getting the recent clicked <td> value inside all input fields, how to get only the clicked value inside the input using jquery.

The main issue in your code is that you're accessing all the .input elements, even when there may be multiple instances. Instead you should use DOM traversal to access only those which are related to the element which raised the event, or to the HTML which is being appended.
Also note that the delegated event handler should not be inside the click handler. Try this:
$(document).ready(function() {
$("td").on("click", function() {
var $td = $(this);
var $editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$td.find(".input").length) {
var tdText = $td.text();
$td.html($editdiv);
$editdiv.find('.input').val(tdText).focus();
}
});
$(document).on('click', '.submit', function(event) {
var inputval = $(this).prev(".input").val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Your problem is in $('.input').val(tdval);, because here you are selecting all inputs, while you only want the input inside of editdiv
So, you just need to add a parent selector to select that specific input, like this:
$('.input', $(this))
$(document).ready(function() {
$("td").on("click", function() {
var tdval, inputval, editdiv = "";
editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$(this).find(".input").length) {
tdval = $(this).text();
$(this).html(editdiv);
$('.input', $(this)).val(tdval);
$('.input', $(this)).focus();
$(document).on('click', '.submit', function(event) {
inputval = $('.input', $(this).closest(".editdiv")).val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
}
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Responsive Table not formatting after DIV Change/Load, until reszied

Example
Div Page
http://www.uller.com/dump/ajaxresponseissue/index.html
Source code, works fine if go direct
http://www.uller.com/dump/ajaxresponseissue/table.html
Displaying a table dynamically into a Div table has responsive script, however when the div is loaded the Script will not run until the window is rezised.
Trying to find a way to auto trigger the script on load of the div.
Below is code examples from that link.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="output"></div>
<script>
// Function called by Period select
$(document).ready(function () {
$("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
});
</script>
</body>
</html>
called table js
<div id="loadMeOnly">
<style type="text/css">
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */
#media only screen and (max-width: 979px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
</style>
<table width='100%' class="responsive">
<tr>
<th scope='col'> </th>
<th colspan='3' scope='col'><center>
Invited
</center></th>
<th colspan='2' scope='col'><center>
Accepted
</center></th>
<th colspan='2' scope='col'><center>
Confirmed
</center></th>
<th colspan='2' scope='col'><center>
Attended
</center></th>
<th scope='col'><center>
Sold
</center></th>
</tr>
<tr>
<th scope='col'>Name</th>
<th scope='col'>P</th>
<th scope='col'>G</th>
<th scope='col'>Total</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
</tr>
<tr>
<td> House</td>
<td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>ss ss</td>
<td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
<td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
<td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>xx xx</td>
<td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>vv vv</td>
<td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>yy yy</td>
<td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
<td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
<td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
<td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
<td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
</tr>
</table>
</div>

Categories

Resources