How to grey out in html tables - javascript

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>

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>

Prevent table from resizing when adding border to specific cell

Here is my code. The problem is: When i click a td cell, add border to it, and the border makes the table changes size.
For some reasons, i dont want the table increase its size when adding border to td tag, and i can not use outline in css.
I tried to add this line of css code : box-sizing: border-box; but it does not seem to work.
Thank you for any idea!!
Array.prototype.forEach.call(
document.querySelectorAll('td'),
function(td) {
td.addEventListener('click', function(e) {
e.target.classList.add('myBorder')
})
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
box-sizing: border-box;
}
.myBorder {
border: 2px solid #4b89ff;
}
<table>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Christ</td>
<td>Male</td>
</tr>
</tbody>
</table>

Inspecting the td with Chrome i found that adding the class to the cell was also generating a padding of 1px. And if you set padding-bottom: 0px; on .myBorder class will solve the problem.
Array.prototype.forEach.call(
document.querySelectorAll('td'),
function(td) {
td.addEventListener('click', function(e) {
e.target.classList.add('myBorder')
})
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
.myBorder {
border: 2px solid #4b89ff;
padding-bottom: 0px;
}
<table>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Christ</td>
<td>Male</td>
</tr>
</tbody>
</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>

How to apply inner border in html tables

I have html tables,and I would like to click each cells and change it's classes to outpatient
td, th {
border: 5px ;
cursor: pointer;
padding: 2.5px;*/
position: relative;
}
.outpatient {
background-color: rgb(0,255,0);
border: 5px solid aqua;
}
When I tried this class the result is like below.
It seems border is not collapsed and some cells are distorted.
https://gyazo.com/a6e5ef991b345934c070ed77d8949305
I guess it must be inner bordered to it's cells.
How can I fix it?
Thanks

I hope that you will agree with it. Thanks
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
td, th {
border:1px solid #ccc;
cursor: pointer;
padding: 2.5px;
position: relative;
text-align:center;
box-sizing:border-box;
}
.outpatient {
background-color: rgb(0,255,0);
outline: 3px solid #546565;
outline-offset: -4px;
}
<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>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</table>

You can set to the td, th style box-sizing:border-box and it will make the border to be in the inner width, and not the outer. as I understand, it is what you looking for

set a 5px border for cells and test it now!
td, th {
border:5px solid transparent;
}

Show and hide table column using jQuery

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/

Categories

Resources