I'm adding rows with javascript to this tbody
<div id="listingContainer"><div id="listing"><table class="table table-hover table-striped" id="listingTable"><tbody id="places"><img src="images/loading.gif"></tbody></table></div></div>
I tried this:
$("#places").html('');
but is adding to it
http://jsfiddle.net/sebababi/2JTPD/
It does not work cause
tbody does not accepts img tag as child element.
This is an example of valid table markup. Act accordingly
<table>
<tbody>
<tr>
<td id="places">
<img src="loading.gif">
</td>
</tr>
</tbody>
</table>
Note: The tbody is not necessary
First of all, you'll need your <img> tag to be within a <td> tag. Then use remove(); to get rid of the image like so:
HTML:
<tbody id="places">
<tr>
<td>
<img src=".../loading.gif">
</td>
</tr>
</tbody>
jQuery:
$("#places img").remove();
Here is fiddle: http://jsfiddle.net/2JTPD/29/
Looking for something like this?
http://jsfiddle.net/chace/2JTPD/28/
window.setTimeout(blahFunc,5000)
function blahFunc() {
$("#places").html('done');
}
Related
Here I have a table
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr style="display:none">
<td>jones</td>
<td>.net</td>
</tr>
<tr style="display:none">
<td>James</td>
<td>SAP</td>
</tr>
<tr>
<td>Charles</td>
<td>Java</td>
</tr>
</tbody>
</table>
I want to get text of first row first td text which are visible using jquery, by
above table, I want result as "Charles".
How can get it. I have tried like
$("#table").closest('tbody').children('tr:first').find('td:first').text()
but not getting result.how can I?
Try to use :visible selector to get the visible rows,
$("#table tbody tr:visible:first td:first").text()
To get the visible one use the according :visible selector that jquery ships:
$('#table > tbody > tr:visible:first > td:first').text();
This is Worked for Me.
$('#table> tbody > tr:visible').first().find('td').first().text();
new_Url:
<td class="posts column-posts">2</td>
old_url:
<span class="view">View</span>
I want to replace the old url by new_url..
var new_url = $("td.column-posts").find("a").attr('href');
$("span.view").find("a").attr('href',new_url)
I can't get the value of new_url.
PLease help. Thanks
Here's the complete structure for New_url:
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1</td>
</tr>
</tbody>
You can do like this, just make the ids for links:
$('#2').attr('href', $('#1').attr('href'));
Here is fiddle. http://jsfiddle.net/Goodluck/PasNk/1/
Enclose tbody inside table tag
<table>
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1
</td>
</tr>
</tbody>
</table>
Working Fiddle
If there is only one td with class column-posts
var new_url = $("td.column-posts a").attr('href');
$("span.view a").attr('href',new_url)
If there is multiple .column-posts td then you have to write in each like
$("td.column-posts a").each(function(){
$("span.view a").attr('href',new_url) //you have to map each span to each a
})
I have this HTML:
<table class="itemsTable table table-striped table-condensed table-hover">
<thead>
<tr>
<th>#</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr class="collapse">
<td class="center">1</td>
<td>
Title 1
</td>
</tr>
<tr class="collapse">
<td class="center">2</td>
<td>
Title 2
</td>
</tr>
<tr class="collapse">
<td class="center">3</td>
<td>
Title 3
</td>
</tr>
</tbody>
</table>
test
And jQuery:
$('.collapseBtn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.itemsTable').find('.collapse');
$collapse.collapse('toggle');
});
I want rows show/hide behavior on link click. What is wrong?
$.closest will look up the dom tree for a matching element - the .itemsTable isn't a parent of .collapseBtn - so $this.closest('.itemsTable') won't match any elements.
So, Either put the .collapseBtn within the table, or use $this.prev() instead of $this.closest('.itemsTable').
You can test if there are matching elements by running $('.collapseBtn').closest('.itemsTable') in the console
As of 130918_1100PST the selected answer is not correct. Although the writer did correctly identify why the closest() selector would not return any elements to collapse, this alone did not fix the OP's problem.
This selector will also work for selecting the elements to collapse:
$('.collapse').methodgoeshere();
but the elements won't expand/collapse -- it's not just a matter of the selector used.
The key to solving the problem, as user Chad identified in his jsFiddle below benjaminbenben's answer, is actually that the wrong method was used.
This did not work:
selector.collapse('toggle');
This did:
selector.toggle();
Therefore, the correct answer was:
$('.collapseBtn').on('click', function() {
$('.collapse').toggle();
});
jsFiddle here
<table id="table" border="1">
<tr>
<td>
<table border="1">
<tr>
<td>aaa</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>bbb</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>ccc</td>
</tr>
</table>
</td>
</tr>
</table>
<span id="append">append</span>
$('#append').click(function(){
$('table#table tr').append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
How can I use jQuery's append function on only the first element? When I use append here, it appends all subtables. I would only like to append the first subtable. I tried with the > selector, but it is not working. How can I achieve this effect?
LIVE DEMO
Try this:
$('#append').click(function(){
$('table#table tr').first().append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
You can use the first() method:
$('#append').click(function(){
$('table#table tr').first().append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
Although that makes invalid HTML.. I think what you mean to append is:
<td><table><tr><td>ddd</td></tr></table></td>
JSFiddle
$("#table table tr:first").after('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
Tested Live DEMO
Take a look at the jQuery first-child selector
If I've understood your requirements, the below should work. Note that I am appending to the first sub-table, as you cannot have a tr as a direct child of a tr (which is why you were ending up with another nested table.
$('#append').click(function(){
$('#table table:first').append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
Updated fiddle
Try $('table#table tr:first-child')
I want to add a table to my website with jquery´s append function when the user hovers over the image $("#dot0003"). Dreamweaver already tells me that there is a syntax error but I don't understand where.
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('
<table id="table1" class="info0004" border="4">
<tr>
<td>roomnumber</td>
<td>200</td>
</tr>
<tr>
<td>number of bathrooms</td>
<td>2</td>
</tr>
<tr>
<td>number of beds</td>
<td><img src="_index/_dots/dot.gif" width="20" height="20"></td>
</tr>
</table>')
})
})
Any help appreciated!
Are you sure this is what you're trying to do? Meaning, when you hover over dot0003, it's going to keep trying to append this data. See the fiddle here.
With that said, your issue is with your spaces. See the fiddle above. Either remove your spaces or build your string like:
var myContent = '<table id="table1" class="info0004" border="4">'
myContent += '<tr>'
...
But this produces invalid HTML markup as your adding tables in your table like such:
<table>
<tr><td></td></tr>
<table>
...
I think you should use jQuery's after method instead of append.
Good luck.
Your adding dynamic table syntax has a space so remove space then run
You can try to run using simple dynamic div
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss</div>')})})
But when you will write syntax with space it will show error
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss
')})})
Try with this code after removing extra space
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<table id="table1" class="info0004" border="4"> <tr><td>roomnumber</td><td>200</td></tr> <tr><td>number of bathrooms</td> <td>2</td></tr><tr><td>number of beds</td> <td><img src="_index/_dots/dot.gif" width="20" height="20"></td></tr></table>')
})
})