Show and hide table column using jQuery - javascript

I came across this fiddle from a SO answer, that hides a table column once a button is clicked. What i want is the absolute opposite. I want it to be hidden by default, and then show and hide (toggle) when i click a button.
How can i achieve this?
Here's the fiddle:
FIDDLE
HTML:
<table id="foo">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>
CSS:
#foo td {
padding: 1em;
border: 1px solid black;
}
#foo.hide2 tr > *:nth-child(2) {
display: none;
}


Set the hide2 class initially to the element or execute the toggle statement once.
#foo td {
padding: 1em;
border: 1px solid black;
}
#foo.hide2 tr > td:nth-child(2) {
display: none;
}
<table id="foo" class="hide2">
<!------------^^^^^^^^^^^-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>


I know how to do it with JQuery adding this line.
$('td:nth-child(2)').hide();
http://jsfiddle.net/bnDVS/609/
And with CSS add it:
#foo td:nth-child(2) { display: none;}
And change it:
#foo.hide2 tr > td:nth-child(2) {
display: none;
}
To:
#foo.hide2 tr > td:nth-child(2) {
display: table-cell;
}
http://jsfiddle.net/bnDVS/610/

Related

: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 change class of elements in adjacent rows of HTML table using jQuery's nextAll() selector

When I tried to change class using .nextAll(':lt(3)') jQuery selector I ran into a problem.
Class doesn't change in new rows of html tables. If I understand correctly, class change of next 3 cells are applied by this method.
Is there any method to fix it?
$(function() {
$("td").click(function() {
$('td').removeClass('outpatient'); //If you want to reset in each click
$(this).nextAll(':lt(3)').addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.outpatient {
background-color: yellow;
}
<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>

API documentation for .nextAll()
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector
Since the next row is not a sibling of td element you have to target the next row separately. To do this you can count how many elements were selected by .nextAll() and color the rest of the required elements in the next row.
$(function() {
$("td").click(function() {
$('td').removeClass('outpatient'); //If you want to reset in each click
$(this).nextAll(':lt(3)').addClass('outpatient');
fromNextRow = 3 - $(this).nextAll(':lt(3)').length;
$(this).parent().next().children(':lt('+ fromNextRow +')').addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.outpatient {
background-color: yellow;
}
<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>

Sticky header and footer scrollable main area

I want my page to have a fixed header and footer, which must stay on screen all the time. The lateral panel is on an aside, and the main content inside a section.
Using JavaScript, I managed to keep the aside occupying all the remaining height (window.height - header.height - footer.height). But it only works when the section is not too high. When I resize the window, I can see that the footer is disappearing under the bottom edge of the window, giving room to the section.
I tried many different combinations of overflow-y (inside section, on the div inside it, on both), to no avail. How can I solve it?
I made a jsfiddle example.
function resize() {
var hPage = window.innerHeight;
var hHead = document.getElementById('header').offsetHeight;
var hFoot = document.getElementById('footer').offsetHeight;
document.getElementById('spn').innerHTML = 'Page: ' + hPage + '<BR>Head: ' + hHead + '<BR>Foot: ' + hFoot;
document.getElementById('aside').style.height = (hPage - hHead - hFoot) + 'px';
}
html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
section {
float: right;
width: 80%;
overflow-x: auto;
overflow-y: auto;
}
section div {
padding: 10px;
overflow-x: auto;
overflow-y: auto;
}
aside {
float: left;
background-color: lightgreen;
width: 20%;
}
aside p {
margin-left: 20px;
}
footer {
background-color: green;
color: white;
text-align: center;
clear: both;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}
<body onload='resize()' onresize='resize()'>
<header id='header'>Test 0.1</header>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
<footer id='footer'>Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.</footer>
</body>

Try the flexbox approach, no javascript is needed. Added a <main> element wraps the <aside> and <section>.
jsFiddle
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
main {
flex: 1;
display: flex;
min-height: 0;
}
aside {
background-color: lightgreen;
width: 20%;
overflow: auto;
}
aside p {
margin-left: 20px;
}
section {
width: 80%;
overflow: auto;
}
section div {
padding: 10px;
}
footer {
background-color: green;
color: white;
text-align: center;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}
<header id='header'>
Test 0.1
</header>
<main>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
</main>
<footer id='footer'>
Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.
<br>
</footer>

If you want to make the header and footer to have a fixed position then you should use position:fixed attribute.
Here is the fiddle

You can apply position:fixed to the footer & also to show the table if it's height overflows , you need to add scroll option.
Here is a css which may help you
#footer{
position:fixed;
bottom:0;
width:100%
}
#divMain{
overflow-y:auto; // scrollbar will only appear when require
height:500px; // you can adjust this height
}
DEMO

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>

Categories

Resources