I have a table and I want certain tr to have the same css class as the tr before it.
in the example below the tr with class="?" should have the same class as the ones above.
is this possible?
<table>
<tr class="red">
<td></td>
</tr>
<tr class="?">
<td></td>
</tr>
<tr class="blue">
<td></td>
</tr>
<tr class="?">
<td></td>
</tr>
</table>
based on Karl idea.
Use Jquery
http://jsfiddle.net/forX/KBfzD/
$(function(){
$(".unknown").each(function()
{
$(this).removeClass("unknown");
$(this).addClass(
$(this)
.prev()
.attr("class")
);
});
});
I change the ? for unknown. I dont know how to use ? in css/css selector.
Try this:
HTML:
<table border="1" style="border-collapse:collapse;">
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
jQuery:
$(function(){
$("tr").addClass("red");
$("tr:nth-child(4n)").removeClass("red").addClass("blue")
.prev().removeClass("red").addClass("blue");
});
This will select every 4th child, remove the red CSS class, add the blue CSS class and the move to the previous element and do the same.
Note: Here is a jsFiddle that you can play around with.
Every html element is addressable with css, so in the stylesheet of your css,if you decalre like element{
set the desired property ;
}
In this case the element would be tr all the table rows will have the properties you have set in above general declaration ,and if you want to override the specific values to some of your table rows you can address them like using the class
I am not pretty sure about understanding this problem but:
in css: tr.classname + tr gives you the next tr from tr which has a classname. See this Fiddle.
You can also checkout css nth-child,even & odd selectors.
Based on what you have mentioned, this is the fiddle.
It just checks the previous element of class: ?
without javascript, you can play with element:li:nth-child(x) values
can be anything like n, n+1, 2n+1, etc... and you can give them different values.
Related
As you know, some <table> start with <tr><th> excepts <tr><td>.
So how can we always select the first <tr> that has <td> in a table?
I tried but was unsuccessful.
$("tr:has(> td):first-child")
Your answer is very close indeed. To select the first tr that has td use:
$("tr:has(td):first")
//OR
$("tr:has(td)").first()
//OR
$("tr:not(:has(th))").first()
I want display cricket team details. First row of a table is the captains, so for every first row color, I want to make the font size to be green and bold
This is My HTML:
<div >
<table id="sports" border=1 align=center >
<thead >
<tr>
<th>Team1</th>
<th>Team2</th>
</tr>
</thead>
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
</table>
</div>
This is my model, where I have taken static data:
export const Players=[
{Indian_players:'Kohili(c)',Australia_players:'David Warner(c)',Pakistan_players:'shaheen Afridi(c)',Southafrica_players:'dale steyn(c)',England_players:'Harry Kane(c)'},
{Indian_players:' Dhoni',Australia_players:'Steve Smith',Pakistan_players:'sarfraz Ahmed',Southafrica_players:'du plessis',England_players:'Joe Root'},
{Indian_players:'Rohit Sharma',Australia_players:'Glen Maxwell',Pakistan_players:'Babar Azam',Southafrica_players:'Imran Tahir',England_players:'Alex Hales'},
{Indian_players:'Jadeja',Australia_players:'Aron Finch',Pakistan_players:'Mohamad Hafeez',Southafrica_players:'David Miller',England_players:'James Anderson'},
{Indian_players:'K.L.Rahul',Australia_players:'Mitchel Starc',Pakistan_players:'Imad Wasim',Southafrica_players:'Jp duminy',England_players:'Moeen Ali'},
{Indian_players:'Bhuvaneswar Kumar',Australia_players:'Travis Head',Pakistan_players:'Shadab khan',Southafrica_players:'de kock',England_players:'Jos Buttler'},
{Indian_players:'Shikar Dhawan',Australia_players:'Pat cummins',Pakistan_players:'yasir shah',Southafrica_players:'Hashim Amla',England_players:'Ben Strokes'},
{Indian_players:'RishabPanth',Australia_players:'Mitchel Marsh',Pakistan_players:'Imam-ul-haq',Southafrica_players:'chris morris',England_players:'Sam Billings'},
{Indian_players:'Ashwin',Australia_players:'Peter siddle',Pakistan_players:'Faheem Ashraf',Southafrica_players:'Aiden markram',England_players:'Eoin Morgan'},
{Indian_players:'Dinesh Karthik',Australia_players:'Tim Paine',Pakistan_players:'Shoib Malik',Southafrica_players:'Dean Elgar',England_players:'chris Woakes'},
You can do the following.
<tbody>
<tr *ngFor="let T of Teams; let i = index" [class.your-captain-css-class]="index===0">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I've done the following.
getting the index along with object.
Adding class if index is 0.
This is cover your requirement. There is another way of doing it only by CSS.
You can do it with CSS by doing this
custom-class:first-child {
color: yellow;
font-size: 15px;
}
Also, you have an error in your sample an ending tr tag but no beginning tr tag inside the body
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I believe after reading the comments you could/should do this instead and use the CSS at the top and it should all work the reason I suggest using the class instead of tr is because if you are using tr you have used tr more then once and it will affect all tr tags instead of just the one you want in the body.
<tbody>
<tr *ngFor="let T of Teams" class="custom-class">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I have below piece of code which is not working as expected. I am trying to create hidden th and td tags inside single row. There are multiple th and td tags in one row and I need to make them visible via javascript on some condition :
<table>
<tr>
<div id ="test1" style ="display:none">
<th>Test1>
<td><div class="test1"></div></td>
</div>
<div id ="test2" style ="display:none">
<th>Test2>
<td><div class="test2"></div></td>
</div>
</tr>
</table>
This is not hiding TH/td tags. If I try to create different ids for th and td (without using div) and then set it's display as none , then when value of divs(test1 and test2) is populated it comes in second line(result2) rather than getting aligned with TH(Result1)
Any idea how can be it done so that my display is like below:
Result1
Test1 test1Value
Test2 test2value
Result2
Test1
test1Value
Test2
Test2Value
As mentioned in the comments, the issue is with the code being invalid. To fix this issue:
Restructure the table in a valid way.
Add similar classes to the cells related to the same test.
Hide/show the cells based on the class
For example, here is a demo code based on the HTML above and your comments (I used d3.js as the question is tagged with it):
function hideTest1() {
d3.select("body").selectAll(".test1_cell").style("display", "none");
}
function showTest1() {
d3.select("body").selectAll(".test1_cell").style("display", "table-cell");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<table>
<tr>
<th class="test1_cell">Test1></th>
<td class="test1_cell"><div class="test1">Result Test 1</div></td>
<th class="test2_cell">Test2></th>
<td class="test2_cell"><div class="test2">Result Test 2</div></td>
</tr>
</table>
<button onclick="hideTest1()">Hide Test 1</button>
<button onclick="showTest1()">Show Test 1</button>
Just click on the buttons to show/hide the cells related to test 1. You can also see the demo on this JSFiddle: http://jsfiddle.net/ud9bgo8c/
given a table
<table>
<tr class="sechead">...
<tr>...
<tr>...
<tr class="sechead">...
<tr>...
<tr>...
</table>
I have tried the following. I want it to alternate the colours for the rows coming after sechead.
table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}
It color all the rows with the same color. Any possible solutions for this?
The problem is that all of the rows after the .sechead come after the first .sechead
If adjusting the HTML is okay, you could try this:
<table>
<tbody>
<tr class="sechead">...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody>
<tr class="sechead">...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
...
</table>
Then your style can be:
tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}
Note that I removed the "odd" selector, so that browsers that don't support nth-child still have a fallback defined.
If your sure you have only two <tr> tags after every class="sechead" . Then u can try this
<table>
<tr class="sechead"><td>Hello</td></tr>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
<tr class="sechead"><td>welcome</td></tr>
<tr><td>content4</td></tr>
<tr><td>content5</td></tr>
</table>
CSS
<style>
tr{width:50px;height:30px;}
table tr.sechead + tr{background-color:rgb(75,172,198);}
table tr.sechead + tr+tr{background-color:rgb(153,129,189);}
</style>
I know how to refer to a tag with an id or class in css
<table id="cooltable">
<tr>
<td></td>
<td></td>
</tr>
</table>
so in css, u refer this <table> by
table#cooltable{
...
}
However, if I want to refer the <td> in <table> in css, how do I that?
In CSS, the space character on its own means "descendant". For example, this refers to every td that is a descendant of table#cooltable:
table#cooltable td {
...
}
You can also use the > operator: this is more strict, and only applies to direct children. To achieve the same effect using this, you would write:
table#cooltable > tr > td {
...
}
In this case, I'd prefer the first option, but there are some situations—multiple layers of <div> tags, for example, or nested tables, where this is a very useful tool.
#cooltable td
or
#cooltable tr
table#cooltable td {
/* css goes here */
}