How would I go about finding a td element's position in a table row? I have seen this code suggested, but is there a way to do this with having each td tag contain an onclick event?
<table>
<tr>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
</tr>
</table>
<script>
function myFunction(x) {
alert("Cell index is: " + x.cellIndex);
}
</script>
I have a grid of images and I am trying to see which images in the grid have been clicked. I tried this:
$('td img').on('click', function(x){
console.log("Cell index is: " + x.cellIndex);
});
But it just logs undefined
$('td img').on('click', function(e) {
var td = $(this).parent();
var tr = td.parent();
var children = tr.children().length;
var tdIndex = td.index() + 1;
var trIndex = tr.index();
console.log((trIndex * children) + tdIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><img src="1.jpg" /></td>
<td><img src="2.jpg" /></td>
</tr>
<tr>
<td><img src="1.jpg" /></td>
<td><img src="2.jpg" /></td>
</tr>
</table>
$('table tr td').click(function() {
console.log($(this).index()) //use index() to get the index of clicked td
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
</tr>
</table>
attach a click to td and use .index() to get the index of click td
You can use $.index() function in jquery to get the object's index
https://api.jquery.com/index/
function myFunction(x) {
alert($(x).index());
}
Hope it helps.
You just need to call .index() on the element that you are trying to get the index of.
$('td img').click(function(){
var index = $(this).parent().index();
});
Here is a fiddle:
https://jsfiddle.net/407u4Lp2/1/
In vanilla JavaScript, you could handle it like so:
var tds = document.querySelectorAll('td');
for(var i = 0, len = tds.length; i < len; i++) {
tds[i].addEventListener('click', function(e){
var td = this || (e || event).target;
alert(td.cellIndex)
});
}
Attaching the onclick event to each TD element on the page. Here's a Fiddle of it in action, and with jQuery you just need to specify what the x is referencing.
$('td').on('click', function(e){
alert('this.cellIndex: ' + this.cellIndex + '\n$(this),index(): ' + $(this).index());
});
Documentation on event.target
Related
It should be very easy if the selector was just <tr> like this $('tr'), but I target td. For example click here or td 2 etc. I want to have the content of the first td compared to the clicked td. That is to say td 1 in this case.
//And this is my jQuery code with <tr> .. what about if a select was a <td> ?
$('tr').on('click', function() {
var tds = $('td:first-child', this).text();
alert(tds);
});
//After having documented I found this but that did not help :(
var td1 = $(this).closest('td.id').prev('').text();
alert(td1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="id"> td 1 </td>
<td> td 2 </td>
<td> td 3 </td>
<td> CLICK HERE </td>
</tr>
</table>
Thank you in advance
To get the first td of any clicked row use the :first selector, like this:
$('tr').on('click', function() {
var tds = $(this).find('td:first').text();
});
Alternatively, if the click event is bound to the td itself, use closest() to get the parent tr, then find the first td:
$('td').on('click', function() {
var tds = $(this).closest('tr').find('td:first').text();
});
You can use jQuerys parent() and children() functions:
$('td').on('click',function()
{
var tr = $(this).parent();
var tds = tr.children();
var first_td = tds[0];
var text = $(first_td).text();
alert(text);
});
It's brain dead me here again.
Issue:
trying to get the value of a hidden td in the same row as a selected button. The code i have finds both the values of both hidden tds, i just want the value of the hidden td of the same row as the pressed button.
Thanks in advance
HTML
<tr>
<td class="rowid" hidden>1</td>
<td >data</td>
<td ><button>process</button></td>
</tr>
<tr>
<td class="rowid" hidden>2</td>
<td >data</td>
<td ><button>process</button></td>
</tr>
jQuery
$j("Button").on("click",function(){
var strRwId = $j( "td.strRowId" ).text();
$j("td.strRowId").css( "background-color", "red" );
alert("you pressed the edit button for Row: " + strRwId + "!");
});
this could give you an idea
$("button").click(function() {
var $button = $(this);
var $tr = $button.parent("tr");
var $hidden = $tr.find("td[hidden]");
alert("you pressed the edit button for Row: " + $hidden.html() + "!");
})
I think you are looking for something like this.
$("button").on("click", function () {
var tr = $(this).closest('tr');
var strRwId = tr.find('.rowid').text();
tr.css("background-color", "red");
alert("you pressed the edit button for Row: " + strRwId + "!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="rowid" hidden>1</td>
<td>data</td>
<td><button>process</button></td>
</tr>
<tr>
<td class="rowid" hidden>2</td>
<td>data</td>
<td><button>process</button></td>
</tr>
</table>
$('td').click(function() {
myId = $(this).parent().attr("id");
myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td></div>
</tr>
</table>
When I click on table item I want to get alert 'u clicked science' but I get undefined.
Any help would be appreciated!
There are no id attributes in your markup. All you are dealing with is innerText
$('td').click(function() {
var myItem = $(this).text();
alert('u clicked ' + myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td>
</tr>
</table>
You have invalid markup. extra closing div is added after last tr closing markup. you need to remove it.
what you need to alert is text of element and not parent id. use .text() along with clicked td elements jquery context:
$('td').click(function(){
myItem=$(this).text();
alert('u clicked ' +myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td>Computer</td></tr>
<tr><td>maths</td></tr>
<tr><td>physics</td></tr>
</table>
try this:
$('td').click(function () {
alert('u clicked ' + $(this).text());
});
As I have already commented, you are missing ID in tr. I have added few more tds for demo.
$('td').click(function() {
var myId = $(this).parent().attr("id");
var myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr id="IT">
<td>Computer</td>
</tr>
<tr id="General">
<td>maths</td>
<td>History</td>
</tr>
<tr id="Science">
<td>physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
</table>
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
});
I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?
Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});
you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.
The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.
Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.