I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that?
How can i check if a td is empty?
You can use :empty selector:
Demo:
//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());
table, th, td {
border: 1px solid black;
}
table tr > td:empty {
background-color: yellow;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>May</td>
<td> </td>
</tr>
</table>
You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.
Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.
$(document).ready(function () {
$("table td").each(function (index, eachCell) {
if ($(eachCell).html().trim().length === 0) {
$(eachCell).addClass("empty-cell");
}
});
});
.empty-cell {
background-color: red;
}
td {
border: 1px solid #ddd;
padding: 5px;
}
td:empty {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td> </td>
</tr>
</tbody>
</table>
Related
I would like to behind row2by default and by clicking tables,it will show itself.
When I try my work like below,row2 is behind. but the shape of tables distorted.
I would like to align tables and behind row2 by deafault.
How can I fix it ?
Why this table distorted?
Thanks
$(function() {
$("table").click(function() {
$("table tr:eq(1)").toggleClass('show');
});
});
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}
tr:nth-child(2):not([class]) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
If you want to toggle the row, I suggest you have a concept of "hide", rather than "show".
Also, get rid of the second row header. Not sure why you need it, if you are spanning 2 rows.
$(() => {
$('table').click(function(e) {
$(this).find('tr:eq(1)').toggleClass('hide');
});
});
table, th, td {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0.25em;
}
th {
cursor: pointer
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody>
<tr>
<th rowspan="2">Header</th>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="hide">
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</tbody>
</table>
Some event were registered in calendar like html tables.
I would like to unregister these event by clicking them.
To realize this,I would like to removeclass continuous cells. like
When we click3or4,then 3,4 cell's class will be removed.
When we click 13or14or15,then 13,14,15 cell's class will be removed.
When we click 9, then only 9 cell's class will be removed.
Is it possible?
and are there any way to realize it?
Thanks
$(function() {
$("td").click(function() {
$(this).removeClass();
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color: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 class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>
You can first use .closest() to target the parent tr element then use .find() to target all the element with the class aqua to remove them:
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color: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 class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>
If you just change your script like below. Your code will work perfectly according to your requirement.
$(function() {
$("tr").click(function() {
$(this).children().removeClass();
});
});
or else you can change like below as well. It also work perfectly.
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
Best Answer is using second method.
You can simply target only the cells having that aqua class to achieve this, instead of targeting every cell. Then using .closest('tr') find the closest parent tr for the clicked cell and after that using .find('td.aqua') find all the cells having the class aqua and then finally remove the class from each of them.
$(function() {
$("td.aqua").click(function() {
$(this).closest('tr').find('td.aqua').removeClass('aqua');
});
});
td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}
<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 class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>
if you want to remove aqua class when clicking each row then use this
$(function() {
$("tr").click(function() {
$(this).children().removeClass('aqua');
});
});
OR when clicking on the cells themselves use this
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: 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 class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>
make font-weight:bold if table tbody tr td value greater than 0 without loop using javascript or jquery
Selector is
$(table tbody tr td)
without $.each
HTML Sample
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
If you need a Jquery, make
$('table td').attr('style','font-weight:bold;');
Without looping, and since values get set client side, you could combine the CSS attr(), a pseudo element like ::after and an attribute selector.
When your client side routine set a value, it does so to the attribute data-value="" instead of inside the element itself, and when done like that, you can use this CSS to style the cells
table td {
background: #eee;
}
table td::after {
content: attr(data-value);
padding: 10px;
}
table td[data-value="0"] {
color: green;
}
table td:not([data-value="0"]) {
color: white;
background: green;
}
<table id="example">
<tr>
<td data-value="0"></td>
<td data-value="1"></td>
<td data-value="2"></td>
</tr>
</table>
<table id="myTable">
<tr>
<td data-value="1"></td>
<td data-value="0"></td>
<td data-value="3"></td>
</tr>
</table>
You can use the :empty css selector like this :
#example td{
background-color: magenta;
color: #FFF;
}
#example td:not(:empty){
background: blue;
}
#myTable td:not(:empty){
font-weight: bold;
}
<table id="example">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
<table id="myTable">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
You can use .text() for retrieve the value and then passing a function that checks the value, returning it in bold in case of greater than 0.
I think it is the only way to do it without adding extra attributes to the HTML you provide us.
Check this snippet.
tds = $('table tr td').text(function(index, text){
return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
Finally, the solution is to use JQuery selector :contains() to get cell text
$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>3</td>
<td>test</td>
</tr>
</table>
You can make the table cell bold by using this CSS:
table tbody tr td {
font-weight: bold;
}
That will apply an bold effect to text in the table cells. If there's no table cells to show then it'll skip the CSS rule.
I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }
Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question.
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example:
Parent A
Child 1
Child 2
Parent B
Parent C
Child 1
I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color.
Please see the included snippet for an example of what I'm trying to achieve.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentEven {
background-color: #c294fa;
}
.oddChild {
background-color: #f2c4fa;
}
.evenChild {
background-color: #d8bbfd;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="oddChild">
<td>A1</td>
</tr>
<tr class="oddChild">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="oddChild">
<td>C1</td>
</tr>
<tr class="oddChild">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="evenChild">
<td>D1</td>
</tr>
<tr class="evenChild">
<td>D2</td>
</tr>
</tbody>
</table>
I tried using CSS pseudo-selectors, but no luck.
.parent:nth-child(odd) {
background-color: green;
}
.parent:nth-child(even) {
background-color: blue;
}
The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children.
Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?
Is there any reason not to use multiple <tbody>s?
Grouping rows can make it easy.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
tbody:nth-child(odd) > tr { /* odd child */
background-color: #f2c4fa;
}
tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
background-color: #eb94fa;
}
tbody:nth-child(even) > tr { /* even child */
background-color: #d8bbfd;
}
tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
background-color: #c294fa;
}
<table>
<tbody>
<tr>
<td>Parent A</td>
</tr>
<tr>
<td>A1</td>
</tr>
<tr>
<td>A2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent B</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent C</td>
</tr>
<tr>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent D</td>
</tr>
<tr>
<td>D1</td>
</tr>
<tr>
<td>D2</td>
</tr>
</tbody>
</table>
why not do some javascript?
var RowNumber = 0,
for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
this.setAttribute('class', 'even');
} else {
this.setAttribute('class', 'odd');
}
});
create the even class and odd class and give each tr an id
*This is a note: Set x to equal the amount of rows in your table.
OR do a switch statement, I prefer a good ol' if statement but Switch could work just as well :)
Check this solution: http://fiddle.jshell.net/manzapanza/6vjLm0td/
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
background-color: #F9E1DC;
}
.parentEven {
background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
background-color: #EEE5FA;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="parentOdd child">
<td>A1</td>
</tr>
<tr class="parentOdd child">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="parentOdd child">
<td>C1</td>
</tr>
<tr class="parentOdd child">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="parentEven child">
<td>D1</td>
</tr>
<tr class="parentEven child">
<td>D2</td>
</tr>
</tbody>
</table>