I have the following HTML:
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
</table>
and the following jQuery :
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
});
</script>
how can i get the class name of Odd row in Jquery?
Simply
var $elems = $("table.ChatBox tr:odd"); should work.
To get their classes(heads up to Juicy Scripter below),
$elems.each(function(){ console.log(this.className); //do whatever with the class names. });
Try this:
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox").children("td:odd").attr("class");
alert (Tabletr);
}
});
</script>
You can also use :first instead of :odd if you wish to get the first td class.
jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
var firstElementClass = Tabletr.eq(0).attr('class');
// Previous is the same as
var firstElementClass = Tabletr.get(0).className;
// Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
var classes = [];
Tabletr.each(function(){
classes.push(this.className);
// OR
classes.push($(this).attr('class'));
});
});
You can simplify your selector:
var Tabletr = $(".ChatBox tr:odd")
This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:
var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"
But if there are multiple rows, you need something more like this:
var TableRowClasses = $(".ChatBox tr:odd").map( function(){
return this.className;
}).get();
This gives you an array with every odd row's class as an element. So you'd end up with an array like this:
["row2","row4","row6"] // confusing odd-row classnames notwithstanding
I've look at your code and the following changes gave me the result your after.
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
<tr class="row3">
<td></td>
</tr>
<tr class="row4">
<td></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".ChatBox tr:odd").each(function () {
//test
alert($(this).attr("class"));
});
});
</script>
Related
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.
How do I get the index of clicked item in the code below?
$('selector').click(function (event) {
// get index in collection of the clicked item ...
});
With Firebug I saw this: jQuery151017197709735298827: 2 (I've clicked in the second element).
This will alert the index of the clicked selector (starting with 0 for the first):
$('selector').click(function(){
alert( $('selector').index(this) );
});
$('selector').click(function (event) {
alert($(this).index());
});
jsfiddle
Siblings
$(this).index() can be used to get the index of the clicked element if the elements are siblings.
<div id="container">
1
2
3
4
</div>
$('#container').on('click', 'a', function() {
console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
1
2
3
4
</div>
Not siblings
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Pass the selector to the index(selector).
$(this).index(selector);
Example:
Find the index of the <a> element that is clicked.
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
Fiddle
$('#table').on('click', '.adwa', function() {
console.log($(this).index(".adwa"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>vendor id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
</tbody>
</table>
Just do this way:-
$('ul li').on('click', function(e) {
alert($(this).index());
});
OR
$('ul li').click(function() {
alert($(this).index());
});
check this out
https://forum.jquery.com/topic/get-index-of-same-class-element-on-click
then
http://jsfiddle.net/me2loveit2/d6rFM/2/
var index = $('selector').index(this);
console.log(index)
if you are using .bind(this), try this:
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
$(this.pagination).find("a").on('click', function(evt) {
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
this.goTo(index);
}.bind(this))
I'm trying to write a jQuery takes the value from the between the tags to be an attribute named data-row-key="xx"
my html looks like this:
<table id="linksgrid">
<thead>
</thead>
<tbody>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
but I need to look like this:
<table id="Table1">
<thead>
</thead>
<tbody>
<tr class="grid-row" data-row-key="1">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row" data-row-key="2">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
noticed the added attribute to the tag,
any help or hint to point me in the right direction will be greatly appreciated, thanks
UPDATE
before I posted the question i tried
$('td[data-name="BrokenLink_ID"]').each(function() {
var id = $(this).text();
var table = document.getElementById('linksgrid');
var rows = table.rows;
for (var i = 0, 1 = rows.lenght; i < l; i++) {
rows[i].data = id
}
});
$('#linksgrid tr').each(function() {
$(this).data('row-key', $(this).text());
// or $(this).attr('data-row-key', $(this).text());
});
Something like this:
$('.grid-cell').each(function() {
$(this).parent().attr('data-row-key', $(this).text());
});
// run a function on each instance of .grid-row
$('.grid-row').each(function() {
// grab the text from the current child .grid-cell
var myAttrVal = $(this).find('.grid-cell').text();
// add the attribute to this row
$(this).attr('data-row-key', myAttrVal);
});
Select all tr elements and add a data-row-key value as follows:
$('#linksgrid tbody tr').data('row-key', function() {
return $('td', this).text();
});
$('.grid-row').each(function() {
var no = $(this).children('td').text()
$(this).attr('data-row-key', no);
});
$('.grid-cell').each(function(){ // loop through each grid-cell
var currentValue = $(this).text(); // get its text
$(this).closest('.grid-row').attr('data-row-key', currentValue); // add the attribute to the grid-cell's parent
});
How do I get the index of clicked item in the code below?
$('selector').click(function (event) {
// get index in collection of the clicked item ...
});
With Firebug I saw this: jQuery151017197709735298827: 2 (I've clicked in the second element).
This will alert the index of the clicked selector (starting with 0 for the first):
$('selector').click(function(){
alert( $('selector').index(this) );
});
$('selector').click(function (event) {
alert($(this).index());
});
jsfiddle
Siblings
$(this).index() can be used to get the index of the clicked element if the elements are siblings.
<div id="container">
1
2
3
4
</div>
$('#container').on('click', 'a', function() {
console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
1
2
3
4
</div>
Not siblings
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Pass the selector to the index(selector).
$(this).index(selector);
Example:
Find the index of the <a> element that is clicked.
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
Fiddle
$('#table').on('click', '.adwa', function() {
console.log($(this).index(".adwa"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>vendor id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
</tbody>
</table>
Just do this way:-
$('ul li').on('click', function(e) {
alert($(this).index());
});
OR
$('ul li').click(function() {
alert($(this).index());
});
check this out
https://forum.jquery.com/topic/get-index-of-same-class-element-on-click
then
http://jsfiddle.net/me2loveit2/d6rFM/2/
var index = $('selector').index(this);
console.log(index)
if you are using .bind(this), try this:
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
$(this.pagination).find("a").on('click', function(evt) {
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
this.goTo(index);
}.bind(this))
How do I get the index of clicked item in the code below?
$('selector').click(function (event) {
// get index in collection of the clicked item ...
});
With Firebug I saw this: jQuery151017197709735298827: 2 (I've clicked in the second element).
This will alert the index of the clicked selector (starting with 0 for the first):
$('selector').click(function(){
alert( $('selector').index(this) );
});
$('selector').click(function (event) {
alert($(this).index());
});
jsfiddle
Siblings
$(this).index() can be used to get the index of the clicked element if the elements are siblings.
<div id="container">
1
2
3
4
</div>
$('#container').on('click', 'a', function() {
console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
1
2
3
4
</div>
Not siblings
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Pass the selector to the index(selector).
$(this).index(selector);
Example:
Find the index of the <a> element that is clicked.
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
Fiddle
$('#table').on('click', '.adwa', function() {
console.log($(this).index(".adwa"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>vendor id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
</tbody>
</table>
Just do this way:-
$('ul li').on('click', function(e) {
alert($(this).index());
});
OR
$('ul li').click(function() {
alert($(this).index());
});
check this out
https://forum.jquery.com/topic/get-index-of-same-class-element-on-click
then
http://jsfiddle.net/me2loveit2/d6rFM/2/
var index = $('selector').index(this);
console.log(index)
if you are using .bind(this), try this:
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
$(this.pagination).find("a").on('click', function(evt) {
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
this.goTo(index);
}.bind(this))