<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')
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'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');
}
I have a question, I am trying to make some manipulation with html tables. I have two tables,
and when I hover first row from the first table, it should highlight both rows from both tables.
I have found a solution, in making this simple function:
<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5';
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}
</script>
On the first table I have:
<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >
on the second table I have:
<tr id="row1" >
So when I put mouseover the first row from the first table, the first row from the second table highlights.
My question is, how to make it for the every single row, especially if it will be dynamic table.
Hope I was clear.
I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows.
Also, CSS classes are more preferable than inline styles.
HTML:
<table id="t1">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
CSS:
tr.active > td
{
background-color:#f00;
}
JS:
$(function(){
$("#t1 tr").hover(
function(){
$(this).addClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
},
function(){
$(this).removeClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
}
);
});
Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/
You can use the div id as a parameter in the function
<tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">
function matchrow(divid){
document.getElementById(divid).style.backgroundcolor='#F5F5F5';
}
function dismatchrow(divid){
document.getElementById(divid).style.backgroundcolor='white';
}
You can use jQuery for this.
Use the .eq() and .index() functions.
A way of doing it:
HTML:
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
JS:
$('table tr').hover(function()
{
var index = $(this).index();
$('table').each(function()
{
$(this).find('tr').eq(index).css('color', 'red');
});
});
A working example can be found here.
How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>
Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});
JS FIDDLE LINK
Your given code is working properly. see this jsfiddle.