I want every other row to be gray, but in the following example - all rows become gray.
<table>
<tr v-for="i in item.env_vars" :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">
<td> test1 </td>
<td> test2 </td>
<td> test3 </td>
</tr>
</table>
and I see this error in vue admin tool:
Property or method "index" is not defined on the instance but referenced during render.
What is wrong with my code?
I'm not familiar with vue, but I think you need to add an index variable to your loop:
<tr v-for="(i, index) in item.env_vars"
You can do this with a simple nth-child rule:
table {
width: 100%;
}
tr:nth-child(odd) {
background: #eee;
}
tr:nth-child(even) {
background: #ccc;
}
<table>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
</table>
Related
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>
I have a table that will have several rows. In one column, there is a link (column a). In the second column, there is the string "Yes" or "No" (column b).
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.
I'm using .each() to go through each td in column b to see if the value is "Yes" or "No". It seems as though even if the cell in column b is "Yes", it will still disable (rename) the link on the matching cell. What am I missing?
$(document).ready(function () {
$("td.regFull").each(function () {
console.log($(this).text());
if($(this).text() !== 'No') {
$('td.regLink a').replaceWith('Closed');
}
});
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
My proposal is:
in order to disable a link you may remove the href attribute.
To select all links you may reduce all to one line:
$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href')
The snippet:
$(function () {
$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href').text('Closed');
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
Instead of this line
$('td.regLink a').replaceWith('Closed');
Make it as closest element
$(this).closest('td.regLink a').replaceWith('Closed');
You have to trim the content of .regFull in the condition to remove the spaces.
Go up to the parent tr then select the link inside .regLink :
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.
So you have to reverse the operator in your condition from !== to ===.
Hope this helps.
$(document).ready(function () {
$("td.regFull").each(function () {
console.log($(this).text().trim());
if($(this).text().trim() === 'No') {
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
}
});
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
I have a table and the last should show additional on click. Everything works fine, but I need a transition (after click the table should expand smoothly).
My test table:
<div ng-app="app">
<table>
<thead ng-controller="TestController">
<tr>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first
</td>
</tr>
<tr>
<td>
second
</td>
</tr>
<tr ng-show="display">
<td>
third
</td>
</tr>
<tr ng-show="display">
<td>
fourth
</td>
</tr>
<tr ng-show="display">
<td>
fifth
</td>
</tr>
<tr ng-click="display = !display" class="last-color">
<td>
click me
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px;
}
td {
border: solid 2px;
}
.last-color td {
background-color: green;
}
tbody {
transition: height 2s;
}
My example on JSFiddle
First of all, CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration. In other words, in order to see a transition working, you should specify both values in your CSS explicitly.
More over, you cannot apply height transitions to table elements (<table>, <tbody>, <tr>, <td>, etc.). However, if you can wrap the contents with <div> elements, you can apply CSS transitions to the <div> elements.
Just for example: https://jsfiddle.net/r4w1u5or/3/
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>
Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..???
Note:
Row width and height are same
Cell width differs in each and every row
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells
I want like this
You can use colspan to create cells that span multiple columns.
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
Update
Your update with the image, yes you can accomplish this using colspan:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:
Update #2
Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}
Yes you can, with the colspan attribute for table cells, like this:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td colspan="5">2</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
</table>
Working example: http://jsfiddle.net/sk5cB/
Not positive that this is what you're looking for, but you could create a table with merged cells by using the colspan attribute in your <td> tags.
HTML colspan Attribute
You may also use and create a table in
<tr> </tr> tags
If you intend to insert content in those cells and prefer to maintain the same cell width then it is impossible using only tables. I've searched for solutions on this problem as well, it looks great when the cells are empty like Daniel Imms presented in his example, but if you add content to those cells their width starts getting bigger and the other cells on the row start getting smaller. Specifying table-layout:fixed doesn't help because then the first row becomes the rule for all following rows.
If you have the possibility to use divs with float left and width in percentage and a clear fix display:table div that wraps them all, just like Bootstrap 3 does in its grid system, then that'll be much more reliable.