I'm using this answer to include a toggle that switches between two css classes: twotablecell and tablecell which are two different sized table headers cells which are different sizes in css.
When clicking on my button id: sizeTog, it changes the table headers class property to tablecell however does not change it back to twotablecell when clicking on it again.
$('#sizeTog').on('click', function() {
$('table thead tr .twotablecell').toggleClass("twotablecell tablecell");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="twotablecell">
Name
</th>
</tr>
</thead>
</table>
<input id="sizeTog" type="button" value="toggle size">
I've tried changing the element that needs to be toggled to: table thead tr th.twotablecell to make it more specific.
It only works accordingly when I change the Jquery toggled element to table thead tr th.
However, this is I have quite a few different table header columns which I want to be different sizes other than twotablecell and tablecell.
The problem is because on the second click the element you're looking for doesn't have the .twotablecell class any more - the first click removed it.
Select it by another means, using a different class which is not removed for example:
$('#sizeTog').on('click', function() {
$('table thead tr .headercell').toggleClass("twotablecell tablecell");
});
.tablecell { color: #C00; }
.twotablecell { color: #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="headercell twotablecell">
Name
</th>
</tr>
</thead>
</table>
<input id="sizeTog" type="button" value="toggle size">
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 have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle
I have the following:
<div id="btnL">Left</div>
<div id="btnR">Right</div>
<table id="tab1">
<thead>
<tr>
<td>Item</td>
<td>Price</td>
<td>Descript</td>
</tr>
</thead>
<tbody>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
.
.
.
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
</tbody>
</table>
<script>
$("#btnR").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","table-cell");
$("#tab1 thead tr td:nth-child(-n+1).css("display","none");
});
$("#btnL").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","none");
$("#tab1 thead tr td:nth-child(-n+1).css("display","table-cell");
});
</script>
The code works as expected, hiding and showing the last element. The issue is there are 20,000 rows in the table and rendering is very slow. I would like to only affect elements in the viewport (+- a few) and as the user scrolls down change the others as opposed to change them all at once.
Assuming you want to hide a particular column. During creation of table attach a class to each td of that column (let's say class is called specialTD).
Make entry in your css like this:
table.hideCol .specialTD { display: none; }
Now whenever you need to hide/show the column, just add/remove the class on the table.
On a side note, your child selector seems incorrect to me.
-n + 1 will only mean first td.
n + 2 will mean every td starting from second.
refer http://css-tricks.com/how-nth-child-works/
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/