We Keep Coding

Finding td element position in table row

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

How to get the text value of the row that was just deleted-Jquery/Js

I have a Delete link on clicking of which deletes the row in a table.
<table id="cont">
<tbody>
<tr>
<td>
<label>account name</label>
</td>
</tr>
<tr>
<td>
<label>type</label>
</td>
</tr>
<tr>
<td><a class=delete href='/url/delete'>Delete</a></td>
</tr>
</tbody>
</table>
here is the js im trying to find the row that i just deleted:
$('.delete').on('click', function(e) {
var $this = $(this);
$this.parent().remove();
//how to get the <tr> that just deleted
alert("deleted" +tr-value-deleted);
});
any ideas appreciated!!
Thanks..

I don't know what you mean by value, bit if you mean the innerHTML, you can first store it and then delete the element.
var deleted = $this.parent().html();
$this.parent.remove();
alert("deleted " + deleted);

It depends what you want as the 'value' mate!
if you want the id of the table you would do
$(this).closest('table').attr('id');
If you want account id or type you could easily do
$(this).closest('table').find('lable');
which should give you an array with the two elements inside

You can cache the cell first and get the outerHTML later.
$('.delete').on('click', function(e) {
var $p = $(this).parent();
$p.remove();
//how to get the <tr> that just deleted
alert("deleted " + $p[0].outerHTML);
});
Fiddle here.

How to get parent id with jQuery?

$('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>

javascript get external table row on click

I have a button:
<button id="external-list-row">Test</button>
in which I would like to change with a row from an external table on click. The external table is structured like this;
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
So my question is this; how can I replace "Test" in the button with the content of Row 1 with javascript?
As for the javascript, I'm not sure how I can get the content from row 1, and replace the button with it.
<script>
var rows = document.getElementById('table_id').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
$('#external-list-row').onclick = function() {
}};
</script>
Post comments:
I can access table data from other tables within the same html file, but I still don't know how to access data from tables in other html files. For example, if I try to access a videos liquid file from another liquid file, like photos, nothing happens when I press the button.
Fiddle of current code. It can replace the content of a list with the content of another, but the lists need to be on the same html file.
https://jsfiddle.net/hgnymydL/

Well, the first thing you should understand, is that a table element has a rows property, so getting the first row is trivial.
var table = document.getElementById("table_id");
var firstRow = table.rows[0];
From there, you can use textContent to get the text content of the row. I believe that's what you were looking for.
You can also select the first row of a table with a CSS selector like so:
var firstRow = document.querySelector("#table_id tbody tr");

$('#external-list-row').on('click', function() {
$(this).text($('#table_id tbody tr:first').text());
});

If you want to replace the button text with contents of the First Row ONLY then:
$('#external-list-row').html($('tr:first-child').html);
Of course you could wrap this in any event, so for example, on clicking the button:
$('#external-list-row').on('click', function() {
$(this).html($('tr:first-child').text());
});
BUT, based on the code you have given, I'm assuming you want to change the text after each click in which case you could do this:
var clickNumber = -1;
$('#external-list-row').on('click', function(event) {
clickNumber = clickNumber + 1;
//console.log('\n\nclickNUmber' + clickNumber);
$('tbody tr').each(function(index, el) {
//console.log('index: ' + index);
var block = $(el).find('td p');
if(index == clickNumber) {
//console.log('entered if')
//console.log(block.text());
//console.log('----clickNUmber' + clickNumber);
//console.log('index: ' + index);
//console.log(el);
$('#external-list-row').html(block.text());
}
});
});
jsFiddle: https://jsfiddle.net/zmb2b37t/
Hope that helps!

If you are wanting to replace the visible text "Test" in the button with the content of the cell clicked:
var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');
tbl.onclick = function(ev){
var trgt = ev.target;
if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
btn.textContent = trgt.textContent;
}
};
Only one event handler is attached in this scenario.
Via event delegation we determine if it was a TD or P element that was clicked. If the rows are modified the function will still work.

Here is jquery code of do this
$('#table_id tr td').on('click', function(){
$('#external-list-row').html($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>

Add attribute to <tr> from text

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
});