HTML
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>
JS
$(document).ready(function() {
$("tr").find("td").eq(2).click(function(){
alert('hi');
});
$("tr").find("td").not().eq(2).click(function(){
alert('hi2');
});
});
What I'm trying to do here is bind a different click event for the every 3rd <td> of each row and every other <td> different click function. 1st function works but how can I bind event for the <td>'s which are not the 3rd ones?
Pass the selector to the not method.
$("tr").find("td").not(':eq(2)').click(function(){
alert('hi2');
});
http://jsfiddle.net/z9HUB/
try this out live fiddle
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi2');
});
$("tr").find("td:not(:eq(2))").click(function(){
alert('hi');
});
});
Try $("td:not(:eq(2)")
$("tr").find("td:not(:eq(2)").click(function(){
alert('hi2');
});
You could do something like this:
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi');
});
$("tr").find("td:lt(2)").click(function(){
alert('hi2');
});
});
Related
I have a html table with a fixed number of rows, of which only the first one is visible from the beginning. Upon clicking a button, row 2 should be revealed. Upon clicking the same button again, row 3 should be revealed, and so on.
Importantly, the full table should be loaded at the beginning (each row contains a specific django formfield), so I do not want to generate additional html rows when clicking the button.
I found lots of stuff on toggling/showing table rows using jQuery, but what I want to do here is I want to show additional rows each time the button is clicked.
My idea was to first initiate and then increment a variable upon clicking in Javascript, and then show an additional row each time. I failed.
I am newbie to Javascript, any suggestions highly appreciated!
$(document).ready(function() {
var counter = 1;
var $rows = $("#fullTable tr");
$("RevealRow").click(function() {
counter++;
$rows.eq(counter).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fullTable">
<tr>
<td>Row 1</td>
</tr>
<tr style="display:none;">
<td>Row 2</td>
</tr>
<tr style="display:none;">
<td>Row 3</td>
</tr>
<tr style="display:none;">
<td>Row 4</td>
</tr>
<tr style="display:none;">
<td>Row 5</td>
</tr>
<tr style="display:none;">
<td>Row 6</td>
</tr>
</table>
<button id="RevealRow">Show more rows</button>
Try this jQuery code
$(document).ready(function () {
$("#RevealRow").click(function () {
$("#fullTable tr:visible").next().show();
});
});
I did this call in Javascript in IE and it works great but in Chrome NOT at all!
I want to hide or show table rows according to a boolean evaluation.
function show(checked, tableName) {
if (checked) {
$(tableName + " tr.class1").show();
} else {
$(tableName + " tr.class1").hide();
}
}
IN HTML
<input type="checkbox" onclick="show(this.checked, '#tbody1')" />
<table>
<thead></thead>
<tbody id="#tbody1">
<tr class="class1"><td></td></tr>
<tr><td></td></tr>
<tr class="class1"><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Nothing happens.
Foolish problem! It works now! It was a problem of Chrome temporary files. It was running the previous version of my javascript which was an include!. Thank you all you guys for the time.
This script I wrote works for me:
var tableClass = '.table';
var checked = false;
if(checked){
$(tableClass + " tr.class1").show();
}else{
$(tableClass + " tr.class1").hide();
}
Having this html:
<table class='table' border="1">
<tr class='class1'>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
I want to have a table with lets say 10 total columns, but when the table first renders, I want it to only show 7 of the 10, or hide 3 of the columns from the middle lets say (not the end 3 or the first). Then, there is a button or something that if they click on, it will expand the table and insert those columns in their correct places.
Is this possible to do? I am using jQuery. I know that there is a show and hide function in jQuery but that seems to apply to objects only, such as a paragraph or a table as a whole, not specific elements.
Currently I have this:
<table id="tableone" border="1">
<tr class="del">
<td>Row 0 Column 0</td>
<td >Row 0 Column 1</td>
<td >Row 0 Column 2</td>
</tr>
<tr class="del">
<td>Row 1 Column 0</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr class="del">
<td>Row 2 Column 0</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr class="del">
<td>Row 3 Column 0</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
<tr class="del">
<td>Row 4 Column 0</td>
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
</tr>
<tr class="del">
<td>Row 5 Column 0</td>
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
</tr>
</table>
you can achieve this using jquery, give some similar classes to the columns which you want to show after the click,
if i understood correct, you can try below
$("button").on("click", function(){
$("class_of_the_colums").toggle();
}
you can look at jquery for more information : http://www.jquery.com
Perhaps if you use unique IDs for any and all elements you wish to hide like:
<table id="tableone" border="1">
<tr id="del1">
<td>Row 0 Column 0</td>
<td >Row 0 Column 1</td>
<td >Row 0 Column 2</td>
</tr>
<tr id="del2">
<td>Row 1 Column 0</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr id="del3">
<td>Row 2 Column 0</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr id="del4">
<td>Row 3 Column 0</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
<tr id="del5">
<td>Row 4 Column 0</td>
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
</tr>
<tr id="del6">
<td>Row 5 Column 0</td>
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
</tr>
Then, in your css styling, where you had .del you would replace with:
#del1,
#del2,
#del3,
#del4,
#del5,
#del6{
properties
}
Then with you jQuery you can use:
$(document).ready(function(){
$("#del3").hide();
$("#del4").hide();
});
And:
$("#id_of_button_that_will_show_the_hidden_elements").click(function(){
$("#del3").show();
$("#del4").show();
});
This would not work with your elements all being part of the same class as $(".del").hide(); will just hide all elements with that class.
Hope I helped =)
You can use CSS selectors to only select specific TDs inside all TRs as follow:
(The count starts at 1, not zero!)
$('tr td:nth-child(2)').hide();
When you want the column to be shown again, you can do:
$('tr td:nth-child(2)').show();
If you are planning on changing the number of columns to hide, or their positions, you'll be better off with assigning a class to these columns and using $('.className').hide(), but on the same wavelength as the example above, you'd do:
$(document).ready( function() {
// Creates a reference to columns 2 and 3;
var $columnsToHide = $('tr td:nth-child(2), tr td:nth-child(3)');
// Hides them
$columnsToHide.toggle();
// if element with id buttonID is clicked
$('#buttonID').on('click', function() {
// show the columns
$columnsToHide.toggle();
});
});
You could write a function which does something like this :
function hssel(cls,from,fr,hs) {
if ( from < 0 ) {
var chlds = $('tr.'+cls).parent().children().length;
from = chlds + from;
}
for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
$('tr.'+cls+':nth-child('+i+')')[(hs=="show"?"show":"hide")]();
}
}
//hssel("del",0) //would hide the first row with the class del
//hssel("del",0,3) //would hide the first three rows
//hssel("del",-3,3) //would hide the last three rows
//hssel("del",-3,3,"show"); //would show the last three rows
hssel("del",-3,3);
Here is an JSBin example
And here is the same function for columns ^^
function hssel(cls,from,fr,hs) {
if ( from < 0 ) {
var chlds = $('tr.'+cls+':first-child').children().length;
console.log(chlds);
from = chlds + from;
}
for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
$('tr.'+cls+' td:nth-child('+i+')')[(hs=="show"?"show":"hide")]();
}
}
And the JSBin example
the usage is the same as for the rows
Im trying to target elements inside of a table with the class '.income_table'. I want to toggle/untoggle a highlighted background color each time a element gets clicked. This isn't working:
<script>
$(document).ready(function(){
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
Is there a problem with my code?
Works for me : http://jsfiddle.net/mplungjan/xBzPW/
<style>
.income_table { background-color:red }
.toggled_tr { background-color:yellow }
</style>
<script>
$(document).ready(function() {
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
<table class="income_table">
<tr>
<td>Row 1 cell 1</td>
<td>Row 1 cell 2</td>
</tr>
<tr>
<td>Row 2 cell 1</td>
<td>Row 2 cell 2</td>
</tr>
</table>
It looks right, you may need to target the TDs though and apply the class there. Try:
<script>
$(document).ready(function(){
$(".income_table tr td").click(function () {
$(this).siblings().toggleClass("toggled_td");
});
});
</script>
I basically have this markup coming from my JSP. I add class in each row and I want have a blinking effect on each row.
<table>
<tbody>
<tr class="blinkYellow">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr class="blinkYellow">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
I setup a Jquery function and a timer like below. But I am currently unsure why the background-color of the table did not change.
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
if($(this).attr("background-color") == "yellow"){
$(this).attr("background-color", "white")
}else{
$(this).attr("background-color", "yellow")
}
})
}
});
I check out the Firebug HTML Tab and I notice that the background-color is really being changed on the selected element row.
But I am not sure why the background color of the row is not toggling its color from yellow and white.
Wouldn't it be better to use css classes to add the color. If you do so, you can use jquery as follows:
$(this).toggleClass("blink-yellow");
EDIT:
You can use this page for trying out such things... http://jsfiddle.net/rgkQK/3/
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
$(this).toggleClass("background-color-yellow");
})
}
});
In fiddle it looks like it would work quite well ;-)
The attr function will add/change an attribute. Use the css function instead of the attr function.
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
var $this = $(this);
if($this.css("background-color") == "yellow"){
$this.css("background-color", "white")
}else{
$this.css("background-color", "yellow")
}
})
}
});
Another option would be to set a css style for the blinkYellow class that includes a background-color of yellow, and then toggle it:
var $blinkYellow = $("tr.blinkYellow");
$(document).ready(function(){
setInterval(findYellow, 1000);
function findYellow() {
$blinkYellow.each(function() {
// note: jQuery is not really needed here - instead, you could use the following line
// this.className = this.className == 'blinkYellow' ? '' : 'blinkYellow';
$(this).toggleClass('blinkYellow');
});
}
});