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))
Related
This question already has answers here:
Is it possible to get the value of a <td> element using onclick?
(6 answers)
Closed 6 years ago.
I want to get the value of the td I click
I have a table ,in this table I have many tr and td
I want to get the value of the td I selected
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a id="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td id="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#lienFicheDemande').click(function (e) {
alert($('#iddem')[0].innerHTML);
window.open("Appli/Home/FicheDemande?iddem=" + $('#iddem').value, "nom_popup", " menubar=no");
});
});
</script>
i want to pass the value of dem_dpr into the link in javascript
First of all, you cannot use IDs this way. They need to be unique per document. Use class instead of IDs. Then, you can use .closest('.iddem') to grab the element closest to the link you clicked and use .html() or .text() to grab it's value.
Example:
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a class="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td class="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.lienFicheDemande').click(function (e) {
alert($(this).closest('.iddem').html());
window.open("Appli/Home/FicheDemande?iddem=" + $(this).closest('.iddem').html(), "nom_popup", " menubar=no");
});
});
</script>
$(document).ready(function () {
$('td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
For every TD, bind click function in each of them.
.text() function will get only the text in TD out from it.
It is best if you could put ID for the table.
So if you have added ID to the table. The solution would be like this:
$(document).ready(function () {
$('#table_id td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
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 have a list of table rows and these tr's have numbered classes for some reason (leg-1, leg-2 etc). It is already possible to delete a single tr from within this context.
After deleting a tr I need to rename the remaining tr's.
Example:
I have
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
Now I delete leg-2. Remaining are:
<tr class="leg-1"></tr>
<tr class="leg-3"></tr>
Now I want to rename the remaining tr's, so that it's back to leg-1 and leg-2.
How can this be done??
Thx for any help!
EDIT:
I forgot to mention that it can have more than one tr with class "leg-1", "leg-2" ... So the right starting example would be
<tr class="leg-1"></tr>
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
<tr class="leg-3"></tr>
Now when I delete leg-2 , both of the tr's with class="leg-3" have to be renamed to be class="leg-2". ..
Sorry I didn't mention this earlier!!
SEE IT IN ACTION
http://jsfiddle.net/Lynkb22n/2/
I'd suggest, at its most straightforward:
$('tr').each(function(i) {
// looking for a class-name that starts with (follows a
// word-boundary: \b) leg- followed by one or more numbers (\d+)
// followed by another word-boundary:
var matchedClass = this.className.match(/\bleg-\d+\b/);
// if a match exists:
if (matchedClass) {
// set the node's className to the same className after replacing
// the found leg-X class name with the string of 'leg-' plus the
// index of the current element in the collection plus one:
this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
}
});
$('tr').each(function(i) {
var matchedClass = this.className.match(/\bleg-\d+\b/);
// if a match exists:
if (matchedClass) {
this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="leg-2323523">
<td>1</td>
</tr>
<tr class="leg-2323523">
<td>2</td>
</tr>
<tr class="leg-2323523">
<td>3</td>
</tr>
<tr class="leg-2323523">
<td>4</td>
</tr>
</tbody>
</table>
Using an id is somewhat easier, since we don't need to preserve pre-existing concurrent ids, as we do with classes:
// selects all <tr> elements, sets their `id` property
// using the anonymous function available within prop():
$('tr').prop('id', function (i) {
// i: the index amongst the collection of <tr> elements:
return 'leg-' + (i+1);
});
$('tr').prop('id', function (i) {
return 'leg-' + (i+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
If the index/row-number is simply to be available to JavaScript, then you could just as easily use the native rowIndex property available to all HTMLTableRowElements:
// selects <tr> elements, binds the 'mouseenter' event-handler:
$('tr').on('mouseenter', function() {
// logs the HTMLTableRowElement rowIndex property
// to the console:
console.log(this.rowIndex);
});
$('tr').on('mouseenter', function() {
console.log(this.rowIndex);
});
td {
border: 1px solid #000;
width: 4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
References:
JavaScript:
HTMLTableRowElement.
JavaScript Regular Expression Guide.
String.prototype.match().
String.prototype.replace().
jQuery:
each().
prop().
Updated
Based on your comment below and your updated question, here is an updated solution.
var removed = $(".leg-2"),
siblings = removed.nextAll(), // affect only next siblings to removed element
pos = ""; // store current number after "leg-"
removed.remove(); // remove element
siblings.each(function (k) {
$(this).removeClass(function (i, key) {
pos = key.split("-")[1]; // update number after "leg-"
return (key.match(/\bleg-\S+/g) || []).join(' ');
}).addClass("leg-" + (pos - 1)); // add "leg-" plus new position
});
See it working here.
You can use .removeClass() with .match() to remove class starts with leg and then add class leg plus tr's index using .addClass().
See it working here.
$("tr").each(function (k) {
k++;
$(this).removeClass(function (i, key) {
return (key.match(/\bleg-\S+/g) || []).join(' ');
}).addClass("leg-" + k);
});
Try this it will re-name the class:
$(document).ready(function(){
$("#click").click(function(){
reorder();
});
});
function reorder(){
$('#myTable > tbody > tr').each(function(index) {
console.log($(this).attr('class','leg-'+(index+1)));//avaoid starting fron 0
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="leg-1"><td>a1</td></tr>
<tr class="leg-2"><td>a2</td></tr>
<tr class="leg-3"><td>a3</td></tr>
<tr class="leg-7"><td>a4</td></tr><!--after click on button class will become class="leg-4" -->
<tr class="leg-8"><td>a5</td></tr><!--after click on button class will become class="leg-5" -->
</table>
<button id="click">CliCk</button>
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>
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))