What's the smartest way to select specific table elements in javascript? - javascript

I've got a table with hidden rows on it, like such
-visible-
-invisible-
-visible-
-invisible-
When I click on a table row, I want it to show the invisible row. Currently I have that using this function:
var grid = $('#BillabilityResults');
$(".tbl tr:has(td)").click(
function () {
$(grid.rows[$(this).index()+1]).toggle();
}
However, this table also hides the visible rows if I click on one of the (now visible) hidden rows.
I'd like the click function to only work on the specific visible rows. Currently all my invisible rows have the class "even" so I figured I could limit the click based on that. However, I can't seem to find the syntax to explain that to my function. How would I go about doing that? And, more importantly, is there a better way to approach this?

Use next:
$(".tbl tr:has(td)").click(
function () {
$(this).next().toggle();
}
);
And also if you have specific selector for odd or even:
$(".tbl tr.odd").click(
function () {
$(this).next().toggle();
}
);
But I think that the major help with my answer is to use next() that get you the next row, instead of the index process that you were doing.

var grid = $('#BillabilityResults');
$(".tbl tr:visible").click(
function () {
$(this).next('tr').toggle();
});

Use the NOT function to disregard the EVEN tr elements:
http://jsfiddle.net/7AHmh/
<table class="tbl">
<tr><td>one</td></tr>
<tr class="even" style="display:none"><td>two</td></tr>
<tr><td>three</td></tr>
<tr class="even" style="display:none"><td>four</td></tr>
</table>​
$(".tbl tr:has(td)").not("tr.even").click(function() {
alert("Click triggered.");
$(this).next("tr").show();
});

I guess you could check for even/odd rows with the modulus operator before calling your toggling code:
function() { // your anonymous function
if (rowNumber % 2 == 0) { // only even rows get through here
// toggle code here
}
}
I hope it helps.

Related

jquery function on same classes

I have a page where I have a table with a class. This table sometimes occurs multiple times on the page. I need to do the same jquery function on each instance. How do I achieve that with jquery...???
Here is my jquery:
jQuery(window).load(function () {
if(jQuery('.ezfc-summary-table tr:eq(2) td:eq(1)').text()=='1 layer'){
jQuery('.ezfc-summary-table tr:eq(5)').hide();
jQuery('.ezfc-summary-table tr:eq(6)').hide();
jQuery('.ezfc-summary-table tr:eq(8)').hide();
}
});
#devlin carnate - i'm trying to do another thing, which is to take the text from one of the td's and append it to another class (product-title), which also appears multiple times. Here is what i have tried, but it only takes the text from the first td it finds, and appends it to all the following classes.
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
var getpartname = $('.ezfc-summary-table tr:eq(0) td:eq(1)').text();
$('.product-title').append('<span style="padding-left: 5px;">'+getpartname+'</span>');
}
});
});
Could you help me solve this problem also...???
Thanks in advance
You can iterate over the class assigned to the tables using jQuery $.each() and hide the rows based on whether the '1 layer' text condition is met:
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
}
});
});
Here is a Fiddle Demo : https://jsfiddle.net/zephyr_hex/f45umhkp/2/

jQuery to loop through dynamically created elements with the same class

I have no. of div which is created dynamically in button click.
<table>
<tbody id="ProductDetail"></tbody>
</table>
In button click, some no. of div are created with Amount value.
funtion createDiv(){
$("#ProductDetail").append("<tr><td ><div class='Amount'>"+Amount+"</div></td></tr>");
}
I want to loop through these dynamically created div to get Amount values in jquery.I tried below code. But its not iterating loop.
function calculateAmount(){
$('.Amount').each(function (i, obj) {
TotalAmountValue=TotalAmountValue+$(this).html();
});
}
Please anybody help me.
I got this working just fine!
$(document).ready(function(){
$("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");
$("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");
$("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");
$("#sum").click(function()
{
var sum = 0;
$(".Amount").each(function()
{
sum += parseInt($(this).text());
});
alert(sum);
});
});
the .each iterates through all your elements that have the class Amount. Use the . selector for class and add the name.
Index represents the position, while the val is the current element.
Edit: get a local variable and set it to 0. After that, iterate through all the elements with that class and take their text. Since it is String, js will try to convert the sum variable to String. You need to parse the text to int. This is a working example.
Here is the HTML
<table>
<tbody id="ProductDetail"></tbody>
</table>
<input type="button" id="sum" value="Sum">
Try using text()
$('.Amount').each(function (i, obj) {
TotalAmountValue += parseInt($(this).text());
});
$('.Amount').each(function(index, val)
{
//do something
});
If you are calling the calculateAmount() function right after createDiv() depending on your page weight, it might happen that the DIV you create on the fly it's not written to the DOM yet and your each function inside calculateAmount() it's not triggered. I recommend adding a JS delay to give the browser the time to append the divs to the DOM. For the user, it will make no difference.
HTML
<table>
<tbody id="ProductDetail"></tbody>
</table>
JS
function createDiv(){
$("#ProductDetail").append("<tr><td ><div class='Amount'>"+Amount+"</div></td></tr>");
}
function calculateAmount(){
$('.Amount').each(function (i, obj) {
TotalAmountValue += parseInt($(this).text());
});
}
createDiv();
setTimeout(function () {
calculateAmount();
}, 400);

Too much duplication of code

The problem I am encountering, is that I have to many duplicates. I am basically trying to show 1/11 tables by which bottom is clicked (list_row[1-11]), so when I show for instance table 2, it must hide all the other tables.
I believe this can be shortened by a loop or something else, because if I have 100 tables then I must copy and paste, not smart. Keep in mind that the code below is just showing table 1 to table 3. How can I prevent these duplicates?
// hide the tables by default when page loads
$('#table1').hide();
$('#table2').hide();
$('#table3').hide();
$('#table4').hide();
$('#table5').hide();
$('#table6').hide();
$('#table7').hide();
$('#table8').hide();
$('#table9').hide();
$('#table10').hide();
$('#table11').hide();
// Show Exhaust Temperature diagram
$('#list_row1').on('click',function(){
$('#table1').show();
$('#table2').hide();
$('#table3').hide();
$('#table4').hide();
$('#table5').hide();
$('#table6').hide();
$('#table7').hide();
$('#table8').hide();
$('#table9').hide();
$('#table10').hide();
$('#table11').hide();
});
// Show Cylinder Pressure diagram
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').show();
$('#table3').hide();
$('#table4').hide();
$('#table5').hide();
$('#table6').hide();
$('#table7').hide();
$('#table8').hide();
$('#table9').hide();
$('#table10').hide();
$('#table11').hide();
});
$('#list_row3').on('click',function(){
$('#table1').hide();
$('#table2').hide();
$('#table3').show();
$('#table4').hide();
$('#table5').hide();
$('#table6').hide();
$('#table7').hide();
$('#table8').hide();
$('#table9').hide();
$('#table10').hide();
$('#table11').hide();
});
// Code continues to table11.
Set all your tables to display: none then introduce an .active class set to display: block (or display: table, in this case). Then simply toggle the class on and off:
.active {
display: table;
}
$('#list_row1').on('click', function() {
$('.active').removeClass('active');
$('#table1').addClass('active');
});
To avoid repetition, however, you'd be better off extending this this to add data-* attributes to your #list_row/n/ elements, and handle click events on these:
<elem id="list_row1" data-row="1"></elem>
$('[data-row]').on('click', function() {
var row = $(this).attr('data-row');
$('.active').removeClass('active');
$('#table' + row).addClass('active');
});
Do also note that you can chain selectors with commas. Rather than using $(elem1).hide(); $(elem2).hide() you can instead $(elem1, elem2).hide().
Try
$('[id^=list_row]').on('click',function(){
$('table').hide();
$('#table'+$(this).attr('id').slice(8)).show();
});
You can also use the starts-with jQuery selector:
$('id^="table"').hide();
$('id^="list_row"').on('click',function(){
var num = this.id.split('w')[1]; //alert(num)
$('id^="table"').hide();
$('#table'+num).show();
});
Reference:
All jQuery Selectors
Add a class to all your table and listrow elements, and a custom attribute on those lasts to identify where are you clicking.
<table id="table2" class="tableClass">
<whatever id="list_row2" class="listRowClass" data-yourProjectname-numRow="2">
This way you can just show the table that's been clicked and hide all the rest:
$(".listRowClass").on("click", function() {
$(".tableClass").hide() // Hides all tables
$("#table" + $(this).attr("data-yourProjectname-numRow")).show() //Shows clicked table
});

Hide a table row with filtering jquery

I have the following example http://jsfiddle.net/zidski/MxqRu/1/
When you click on 2010 I need valuation to disappear with the list items.
Here is the code which I am using to do this:
$("#yearfilter a").live("click", function(e) {
e.preventDefault();
//var v = $(this).val();
var v = $(this).attr("data-value");
if(v.length > 0) {
$('tr.reports').show();
$('tr.reports ul').hide();
$('tr.reports ul.year-'+v).show();
$('tr.reports').each(function() {
if($('ul:visible', this).size() == 0) {
$(this).hide();
}
});
} else {
$('tr.reports').show();
$('tr.reports ul').show();
}
});
I have done it in my project something like this:
function toggleRow(row_id) {
row_selector = "#row_" + row_id;
$(row_selector).toggleClass("shown hidden")
}
Then in the CSS:
.hidden {display:none;}
.shown {}
Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.
...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...
Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.
UPDATE
I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.
UPDATE
I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo

How can I hide empty html table cells with jQuery?

I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.

Categories