HTML:
<table border="1"style="width:500px" id="table2">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>grades</th>
</tr>
<tr>
<td>riddhi</td>
<td>bhatt</td>
<td>50</td>
</tr>
<tr>
<td>sneh</td>
<td>pandya</td>
<td>55</td>
</tr>
<tr>
<td>ankit</td>
<td>purani</td>
<td>60</td>
</tr>
</table>
I want to add a background color in odd rows of table.
JQuery:
$(document).ready(function(){
$("#table2 > tr:odd").css("background-color","blue");
});
I am new in HTML and jQuery, please suggest me so that I can proceed...
Use this ,
$(document).ready(function(){
$("#table2 tr:odd").css("background-color","blue");
});
Demo Fiddle
> won't work here - Reference
The table hierarcy is table > tbody > tr > td, so in that case, try this,
$("#table2 > tbody > tr:odd").css("background-color","blue");
Demo
As others said,
$("#table2 tr:odd")
will select ALL of the odd tr's inside table2, it'll work for a simple table. But if you want to for example put a table inside table2, it will select the trs of the second table too, because they're also inside table2
if you want to select only the tr's from table2, but not the ones of a table inside table2, you would use
$("#table2>tbody>tr:odd")
which selects only the direct tr children of the direct tbody children of table2
Try this
$("#table2 tr:odd").css("background-color","blue");
DEMO
tbody, thead and tfoot is rendered by html so you need to use #table2 > tbody > tr:odd,#table2 > thead > tr:odd,#table2 > tfoot > tr:odd as a selector to make it work but you have no sense to use odd here. So simple if you just remove > then it will be fine:
$("#table2 tr:odd").css("background-color","blue");
IF none of the above working means please try to Change $ to jQuery, it will be work...
It works fine:
http://jsbin.com/caxahube/1/edit
$(document).ready(function(){
$('table>tbody>tr:odd').css('background-color', 'blue');
});
Related
I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color. I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes. I have a Fiddle here.
Here's my CSS:
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly. I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color. The fiddle above shows what is happening.
I tried adding a <tbody>, but I don't think that I did it correctly as the results did not change.
I tried adding $('.selected').removeClass('selected'); and it partly worked. I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.
The way you select siblings for td is wrong, Try this
$("#table2 tbody td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
Fiddle
It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings. The td's in this row:
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:
$(this).closest('table').find('td').not(this).removeClass('selected');
You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
jsFiddle example
Create a css style for the style of your selected cell.
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.
CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});
I am trying to reverse the table row order , with the exception of the first/last row. Have a jsfiddle set up , that is reversing all tr but need to make last row and first row exempt for script
http://jsfiddle.net/Ybyjx/6/
<table id="league_chat">
<tbody>
<tr><td>ALWAYS LEAVE THIS TR AT THE TOP/td></tr>
<tr><td>lots of custom content</td></tr>
<tr><td>lots of other custom content</td></tr>
<tr><td>more custom content</td></tr>
<tr><td>even more custom content</td></tr>
<tr class="reportfooter"><td>ALWAYS LEAVE THIS TR AT THE BOTTOM</td></tr>
</tbody>
</table>
tbody = $('#league_chat tbody');
tbody.children().each(function (i, tr) {
tbody.prepend(tr);
});
You can use get() to get the native nodeList, then reverse() to reverse it, and just add it back.
The last one is excluded with not()
var tbody = $('#league_chat tbody');
$('tr:first', tbody).after( $('tr', tbody).not(':last', ':first').get().reverse() );
FIDDLE
tbody = $('#league_chat tbody');
tbody.children().not(':first').not(":last").each(function (i, tr) {
tbody.find('tr:first').after(tr);
});
In most circumstances where you need to keep the first row and last row constant you probably need to use a header and footer Sample Solution
<table id="league_chat">
<thead>
<tr><td>ALWAYS LEAVE THIS TR AT THE TOP</td></tr>
</thead>
<tbody>
<tr><td>lots of custom content</td></tr>
<tr><td>lots of other custom content</td></tr>
<tr><td>more custom content</td></tr>
<tr><td>even more custom content</td></tr>
</tbody>
<tfoot>
<tr class="reportfooter"><td>ALWAYS LEAVE THIS TR AT THE BOTTOM</td></tr>
</tfoot>
</table>
This is a simple way to do it.
tbody.children().not('.reportfooter').each(function (i, tr) {
$('#league_chat tbody tr:first').after(tr);
});
I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));
I have a table as follows. I need to give background color(yellow) only to the first header column. Also all the text color should be blue in the header (for both columns). What are the ways to achive it using jQuery?
Note: I am trying to learn jQuery. Hence the solution should be using jQuery.
<table id = "myTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Address
</th>
</tr>
</thead>
<tr>
<td>
Lijo
</td>
<td>
India
</td>
</tr>
</table>
$("#myTable th:first").css({
"background-color": "yellow"
});
$("#myTable th").css({
"color": "blue"
});
You can also achieve the same in one line:
$("#myTable th")
.css({"color": "blue"})
.filter(":first")
.css({"background-color": "yellow"});
You can select the first header column like so:
var firstColumnHeader = $('#myTable thead th:first-child');
and then you can update the background colour by using the css method, like so:
firstColumnHeader.css('background', '#FCD116');
Here is a jsfiddle demostration.
Hiya demo http://jsfiddle.net/r3jMv/1/ (updated) (old =>) http://jsfiddle.net/Zarhu/2/
and with blue color here: http://jsfiddle.net/r3jMv/6/ another updated version from below comment: http://jsfiddle.net/cC6hk/
following should do the trick.
this might be good play ground: http://vkanakaraj.wordpress.com/2009/06/18/select-a-column-of-a-table-using-jquery/
jquery code
$(function(){
// Change first column background color.
$("table thead tr th:first-child").css("background-color","#ff0000");
});
$("#myTable > thead > tr >th").css("background-color","yellow");
html
<table id = "myTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Address
</th>
</tr>
</thead>
<tr>
<td>
Lijo
</td>
<td>
India
</td>
</tr>
</table>
This is for the first header where class name should do all the styling.
The selector gets the all the "th" inside the #mytable and using the eq(0) bring the first th and add to it the class
$("#myTable th").eq(0).addClass("ClassName")
This for all the header where class name 2 should do the styling you
$("#myTable th").addClass("ClassName2")
I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/