<div id="m101">
<table class="tablec" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="name">My Name</span></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="clickme">clickme</span></td>
</tr>
</table>
</div>
Which selector should I use to capture the content of "name" if clickme is clicked? There are more than one of those tables with the same classes, but the surrounding divs are unique. The name is different each time.
I've been experimenting the with parent, parents and closest functions so far without luck.
$(".clickme").click(function(){
var name = $(this).closest('.name').text();
alert(name);
});
Would something like this do the trick?
$(".name", $(this).closest("div")).text()
Working example here: http://jsfiddle.net/44re8/
You can traverse the tree up until you hit a <table>:
var name = $( this ).closest( 'table' ).find( '.name' ).text();
You are not able to select the .name using closest() as it is not an ancestor. You would need to select a common ancestor e.g. the table and then work back down the tree to the .name element.
$(".clickme").click(function(){
var table = $(this).closest("table");
var name = table.find('.name').text();
alert(name);
});
You could have this in a single line using
$(".clickme").click(function(){
var name = $(this).closest("table").find('.name').text();
alert(name);
});
This did the work for me
function() {
$(".clickme").click(
function(e) {
alert($(this).parents("div").find(".name").html());
}
);
}
Simplest of answers -
$(document).ready(function(){
$('.clickme').click(function(){
var getName = $('.name').text();
alert(getName);
});
});
Related
I'd like to hide a <div> or <td> inside the <tr> based on the content inside that <tr>.
If Stackoverflow is found inside a <tr>, hide .buttons from that <tr>.
This is what I've got so far.
<table class="sites">
<tbody>
<tr>
<td>
<div class="name">Stackoverflow</div>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
<tr>
<td>
<class name="">Stackexchange</class>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
</tbody>
</table>
var t = $(".sites tr .name:contains('Stackoverflow')");
var d = t.parent('tr').children('.buttons');
d.css( "display", "none" );
I've made a fiddle: https://jsfiddle.net/3jk8e3b2/3/
Your traverses are not going to appropriate levels.
parent() is only immediate parent element, children() are only immediate child nodes
In your case parent of .name is a <td> not <tr> and the buttons are not immediate children of <tr> either.
Use closest() or parents() to allow going up more than one level. Use find() to allow going deeper than children()
Try:
var t = $(".sites tr .name:contains('Stackoverflow')");
t.closest('tr').find('.buttons').hide();
DEMO
I have a form like below
form name="myform" id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
using the form id is there anyway to get the table object inside this form ?
i have tried the below way,that way i can get all the inputs inside the form but i couldn't get the table object
$("form#myform:input").each(function(){
var input = $(this);
});
can anyone suggest a way to do the same.
I'm not sure what you want to do with the table, but you can access it using the following selector:
var yourTable = $("#myform table");
The selector is looking for table element inside element with ID myform.
If you want to get the row selector (as you mentioned in comments), then you can use add selector for tr:
$("#myform table tr").each(function(){
var currentRow = $(this);
// do what you need with current row
});
I think this is what you want
HTML
<form id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
<table class="dest-table">
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">a</td>
<td class="ng-scope">b</td>
<td class="ng-scope">c<td class="ng-scope">d</td>
</tr>
</table>
JS
$(document).ready(function() {
$("#myform tr").on("click", function(event) {
$(".dest-table tr").html($(event.currentTarget).html());
})
})
Fiddle
https://jsfiddle.net/ja454mfx/1/
What about this :
$("form#myform>table").each(function(){
var table = $(this);
});
You use ">" to access the direct descendant which is a table.
EDIT:
$("form#myform>table>tr").each(function(){
var trInner = $(this).html();
});
I need Test 2 text when I clicked on "Click". I have tried like this ...
$("#clicked").click(function(){
alert( $('this').closest('td').next('td').next('td').text());
})
But In alert there is empty. How I can get Test 2 ?
<tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
From comment below:
this means $('#clicked'). That means when I clicked on the Click link.
you need to use parent instead of closest :
$("#clicked").click(function(){
text = $(this).parent().next('td').next('td').text();
alert(text);
})
https://jsfiddle.net/g6gnog4h/
$('#clicked').click(function(){
console.log($(this).closest('td').next().text());
});
Try this one, as you need to go parent tr and than find the 4th td with the ID of a tag to get the text.
<table><tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
</table>
<script>
$('#clicked').click(function(){
alert($(this).parents('tr').children().find('#clicked2').text());
});
</script>
You may try like this:
$('#clicked').click(function(){
var val=$(this).siblings().text();
alert(val);
});
siblings() method returns all sibling elements of the selected element.
I have a table tr and td. In between the table data there is a span that I want to take the ID from.
In my jquery code, it's not returning any value from span id.
How can get span id?
My HTML
<table border="1" id="t1">
<tr>
<td>
<span class="f1" id="111" onclick="subtract();">Subtract</span>
</td>
</tr>
<tr>
<td>
<span class="f2" id="222" onclick="subtract();">Subtract</span>
</td>
</tr>
</table>
My jQuery
$(document).ready(function() {
$("#t1 span").click(function() {
var a = $(this).id();
alert(a);
});
});
Use jQuery's attr method:
var a = $(this).attr('id');
This allows you to take any attribute from any jQuery object element and return its value.
More info in the jQuery attr() Docs
You can simply pass the this in your subtract function:
function subtract(element) {
var a = element.id
console.log(a);
}
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
</table>
Another solution is using jQuery .attr():
$('table#t1 span').click(function() {
var a = $(this).attr('id');
console.log(a);
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2">Subtract</span></td>
</tr>
</table>
You can use id property of Element
var a = this.id;
in jQuery, us the attr function to get attributed from HTML elements. http://api.jquery.com/attr/
See working example using your code: https://jsfiddle.net/e2vonuor/
The problem is that you're chaining a non-existent method to a jQuery's $(this) object, id is neither a function nor a method, in either jQuery or DOM: it's a property, of an HTMLElement. So, instead use a valid jQuery method to retrieve the property:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).prop('id');
alert(a);
});
});
Although you could, certainly, also use attr() in place of prop():
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).attr('id');
alert(a);
});
});
Or use the DOM:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = this.id;
alert(a);
});
});
You either use the inline "onclick" in which case you can send the actual element as a parameter:
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
jQuery
function substract(spanElement){
var id = $(spanElement).attr("id");
alert(id);
}
Or you set the click functionality in the document ready:
$(document).ready(function () {
$("#t1 span").click(function () {
var id = $(this).attr("id");
alert(a);
});
});
I also recommend you debug using console.log instead of the alert function. But this is a matter of preference.
I have a few tr elements that are divided by a category header - I want to add the class from the a elements string to the tr class below and to repeat this trough out. the .keep elements can vary in amount.
How do I do this the best way?
<tr>
<td class="unfoldedlabel" colspan="6”>
<a href="">Drives</a
</td>
</tr>
<tr class="keep”> - should add class .drives
</tr>
<tr class="keep”> - should add class .drives
</tr>
<tr>
<td class="unfoldedlabel" colspan="6”>
<a href=“">Memory</a
</td>
</tr>
<tr class="keep”> - should add class .memory
</tr>
<tr class="keep”> - should add class .memory
</tr>
Try this:
var title = "";
$( "table tr" ).each(function( index ) {
if($(this).find("a").length == 1) {
title = $(this).find("td").find("a").text();
} else {
$(this).addClass(title.toLowerCase());
}
});
Try using nextUntil
$( ".unfoldedlabel a" ).click(function(){
$(this).closest("tr").nextUntil('tr:has(.unfoldedlabel)').addClass( $(this).html().toLowerCase() );
})