I have some rows in a table like the code below and I want after some seconds to hide the contents of td's (i have filled them with text in a loop).
My sample code is this
setTimeout(function() {
$('span').each(function(index, el) {
$(this).hide();//nothing happens
});
}, 5000);
<tr>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
</tr>
I tried using other ways too, like saving all spans to an array, or selecting the class and hiding it.
var arr=$('span');
for (var i=0;i<arr.length;i++){
arr[i].css('visibility','hidden');
}
but same thing happened. I want to be able to show and hide the contents of td's when it's needed without hiding the border if it is possible
you can just use any element in td tag from table.
otherwise browser convert your code to valid code.
output your HTML is like that in browser:
<body>
<span class="myspan"></span>
<span class="myspan"></span>
<span class="myspan"></span>
<span class="myspan"></span>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
you select span but there is no more td in your target span. SO your delect is false.
you have to change yor HTML:
<tr>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
</tr>
now you can select it and do your function:
var arr=$('span');
arr.css('visibility','hidden');
or
var arr=$('span');
arr.hide();
later show yor it:
att.show();
you dont need for or any loop. just select your target and say ehat do you want to do. JQuery do it for each on in your selector (exactly like a loop)
To hide all after 5 seconds, you can use the following code
setTimeout(function() {
$('table tr span').hide(5000);
}, 5000);
or
setTimeout(function() {
$('table tr span').css('visibility','hidden');
}, 5000);
Related
I have a smaller table with multiple tr and td elements which is part of bigger table bgtable .When I click on that smaller table I have a anchor tag to redirect to some page (this must have to be on click on smaller table). Now my onclick event on this table returning Data1 , Data2 and Data3 all together. How can I capture only last td data which is Data3 always using Jquery ?
my below code returning all td data which I don't want.
so
<a href="www.example.com">
<table>
<tr>
<td> Data1 </td>
</tr>
<tr>
<td> Data2 </td>
</tr>
<tr>
<td> Data3 </td>
</tr>
</table>
</a>
then my JQ :
$(document).ready(function() {
$(".bgtable td").on("click", function() {
console.log($(this).text());
});
});
Note: I can't change my onclick but I have to get the "Data3". Tried ($("td:last".text() ). Not helpful and returns nothing
Okay ... finally it is working with below :
$(this).find("td:last").text() ;
Do anybody knows how to get the one element before last one ?
I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?
You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle
simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});
I can't get this one to work and I can't find any similar question that does the same what I want.
I have a table with rows like this:
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td></td>
</tr>
//etc...
I want to check if all the second cells have the text "size" in it! If so then hide the third td.
So what I thought what would work is this:
$('.gui-table tr').each(function(){
if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
$(this).css('visibillity', 'hidden');
}
});
This doesn't work! Does anybody see what is wrong with this?
Just do:
$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');
Fiddle: http://jsfiddle.net/cfmrngcc/2/
Assuming I understand your question correctly the following should do it:
$('.gui-table p.customfields:contains("Size")').parent().next().hide();
td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td>Shown</td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td>Hidden</td>
</tr>
</table>
</div>
This will hide the next table cell after any table cell containing a p tag with the text Size.
It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')
Then using .parent() to select it's parent table cell.
And finally .next() and .hide() to select the next table cell and hide it.
I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:
function doItNow(e)
{
$('.gui-table tr').each(function ()
{
$('td:nth-child(2) .customfields:contains("Size")').each(function ()
{
$(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
});
});
}
Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!
If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:
$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');
Here is a jsfiddle:
http://jsfiddle.net/0qczvak5/
The explanation:
Select all elements with the class name .gui-table, select all second tds with td:nth-child(2), filter them with :contains("Size"). Now you have all second tds with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden').
$(".gui-table tr td:nth-child(2)").each(
function (index,tag){
if ($(tag).find("p").text() == "Size")
$(tag).css('visibility', 'hidden');
}
)
This is will work .
I have a case where a html file contains multiple elements with the same ID name.
The table row contains 5 columns of which I need to consider 2,3,4,5 columns data.
<tr id='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
I have the above code at several places in the file. I need to add the respective values using javascript.
An ID is unique in an html page. You can call it THE ID as well wrt a page. You cannot have same ID for two different tags in a single page. But you can use class instead of and ID. Know about it here
So your HTML can be like
<tr class='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
As an example with jquery you can do something like this,
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
</table>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$(".one").eq(0).find('td').eq(0).html("I'm tracked");
// get 1st tr and get first td
$(".one").eq(1).find('td').eq(1).html("I'm tracked");
// get 2nd tr and get second td
$(".one").eq(2).find('td').eq(0).html("I'm tracked");
// get 3rd tr and get first td
});
</script>
</body>
</html>
But I guess this approach can be tedious.
Id should be unique and if you use the same id, javascript code refers only the first element. but if you still want to use same id than you may try the below code:
$(function(){
$('[id="total_row"]').each(function(){//run for every element having 'total_row' id
var $this = $(this);
$this.find('td').eq(1).text() //to get second column data
$this.find('td').eq(1).text('dummy text') //to set second column data
});
});
You can use XHTML:
<p id="foo" xml:id="bar">
Through XHTML you can apply similar ID to multiple Controls.
Similar questions can be found here:
http://www.c-sharpcorner.com/Forums/
While duplicate IDs are invalid, they are tolerated and can be worked around. They are really only an issue when using document.getElementById.
I'll guess that the table looks like:
<table id="t0">
<tr>
<td>-<th>count<th>Pass<td>Fail<td>Error<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td><td>1<td>0<td>
<tr>
<td>-<td>1<td><td>0<td>1<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
</table>
<button onclick="calcTotals();">Calc totals</button>
If that's correct, then a function to add each sub–section can be like:
function calcTotals(){
var table = document.getElementById('t0');
var rows = table.rows;
var row, totals = [0,0,0,0];
// For every row in the table (skipping the header row)
for (var i=1, iLen=rows.length; i<iLen; i++) {
row = rows[i];
// If it's a total row, write the totals and
// reset the totals array
if (row.id == 'total_row') {
for (var j=0, jLen=totals.length; j<jLen; j++) {
row.cells[j+1].innerHTML = totals[j];
totals[j] = 0;
}
// Otherwise, add values to the totals
} else {
for (var k=0, kLen=totals.length; k<kLen; k++) {
totals[k] += parseInt(row.cells[k + 1].innerHTML) || 0;
}
}
}
}
In addition to using classes, which works but feels kind of icky to me, one can also use data-* attributes.
<tr class='total_row' data-val-row-type="totals-row">
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
Then, in your script (jQuery syntax -- querySelectorAll has a similar syntax)
var $totalsRows = $("[data-val-row-type='totals-row']);
When you are in a team with a separate UI designer, this keeps the UI guy from ripping out and changing your class names to fix the new design layout and it makes it quite clear that you are using this value to identify the row, not just style it.
I have the following HTML
<tbody class="t_bdy">
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
</tbody>
I need to insert new <tr> when I click on button with .crm_insert class.
When .crm_insertis clicked, it need to insert a new row at the current location. All
other rows will move down. For example, if insert against row 3 is clicked then
row 3 will be new row inserted and current row 3 etc will move down to become
row 4 etc.
How can I achieve this ?
All answers are good, but I can only accept one : Thanks all
I'd try something like this using closest() and before()
$('a.crm_insert')
.click(function()
{$(this).closest('tr.Quotation_List_td').before(htmlcodeofyounewTRhere);}
)
Hope this will help
Assuming:
Your new row is in the same structure as your current row
You want the new row to also have the 'Insert' functionality
You want a click event handler which does something to this effect:
$('.crm_insert', '#table').on('click', function() {
var currentRow = $(this).closest('tr');
currentRow.clone(true).insertBefore(currentRow);
});
Where #table is the id of your table.
Here's a simple example
If you are inserting something completely different, then you do not need to use on() or clone(), and the code becomes simpler:
$('.crm_insert').click(function() {
var currentRow = $(this).closest('tr');
$('<tr />').insertBefore(currentRow);
});
Where <tr /> would be whatever you are trying to insert.
This might work for you. It'll find the parent tr of the button you just clicked, clone it (including the onClick functionality of the button) and insert that before the parent tr. This will result in a new row containing the same information as the target row though. Depending on what results you want to show in the new row, you might want to alter the code to clear out any copied values too.
$(".crm_insert").live("click", function(){
var tr = $(this).parents("tr.Quotation_List_td");
tr.clone().insertBefore(tr);
});
You can try this
$('.crm_insert').live('click', function(){
var self = $(this);
self.parents('tr.Quotation_List_td').before('add your row here');
});
The latest versions of jquery employ on instead of live.