Develop Reference

how to access table row object from an anchor within a cell?

i have a table with a few rows. i want to access the cells with the value that are in the same row as the anchor that triggers the function populateRow();
(i hope i explained it in a clear way).
any idea how to do that?
<tr>
<td>
some value
</td>
<td>
update
</td>
</tr>
<tr>
<td>
another value
</td>
<td>
update
</td>
</tr>

The populateRow() function would need to know which anchor was clicked, so you'd need to either pass this to it to give it a reference to said anchor:
onclick="populateRow(this);"
function populateRow(anchor) {
var row = $(anchor).closest("tr");
var firstCellValue = row.find("td").first().text();
}
...and from there use .closest() to navigate up the DOM to the containing tr element.
Or, better, bind the click event handler with jQuery rather than putting it inline on every row:
$(document).ready(function() {
$("#idOfYourTable").on("click", "a", function(e) {
var row = $(this).closest("tr");
var firstCellValue = row.find("td").first().text();
console.log(firstCellValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="idOfYourTable">
<tr>
<td>Value 1</td>
<td>
update
</td>
</tr>
<tr>
<td>Value 2</td>
<td>
update
</td>
</tr>
</table>
(Click the "Run..." button to see it working.)

I don't know what is that populateRow() function for, but if you want to get value on the first td of the same tr, then you can try testing this:
onclick="alert($(this).closest('tr').find('td:first').text())"
if you want to pass it in populateRow() function, you can:
onclick="populateRow($(this).closest('tr').find('td:first').text())"
Or ...
It would be more neat if you pass the element then process it later inside your function:
onclick="populateRow(this)"
function populateRow(elm) {
var val = $(elm).closest('tr').find('td:first').text();
alert(val);
}
Hope this helps. Good luck!

Swapping 2 html table elements

So I made this sliding puzzle using html, css and JavaScript:
this is a table and my question is how do I swap 2 table elements?
Let's say the one with the face (id = tile-2) and the white empy one (id = empty)

Hmm... try this:
https://jsfiddle.net/h7sp1ey8/
<button onclick='swap();'>
Swap
</button>
<table>
<tr>
<td id='f1'>
Contents of td 1
</td>
</tr>
<tr>
<td id='f2'>
Contents of t2
</td>
</tr>
</table>
<script>
function swap()
{
var f1 =document.getElementById('f1');
var f2=document.getElementById('f2');
var initialinner = f1.innerHTML;
f1.innerHTML=f2.innerHTML;
f2.innerHTML=initialinner;
}
</script>
Post your code if you want an exact solution. Here is how you program should work:
get id of box to swap
get id of box to swap to
swap them using method I gave in jsfiddle

How to retrieve text content inside a table without any element id

I have a simple code of an html table. I need to write a Javascript function that is able to alert the content of any row that is selected using the mouse(by clicking).
I do not have any element id. So I need to use the event associated to the click of the mouse...
For example:
<tr>
<td onclick="...">Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
I need to write a javascript function that is able to display with an alert any content of the table I select with a click.
For example If I click on 'Mamata', I need to see an alert appearing on the screen displaying 'Mamata'.

You can do it like this:
var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i++) {
td[i].onclick = function() {
alert(this.innerHTML);
}
}
<table>
<tr>
<td>Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
</table>

define this function
function alertContent(sender) {alert(sender.innerHTML);}
and use it in
onclick="javascript:alertContent(this)"

something like this,
<tr>
<td onClick="alert(this.innerHTML)">Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
a better option is the following:
declare a function,
function alertcontent()
{
_sender = arguments.callee.caller.arguments[0].target;
if (_sender.tagName == "TD")
{
alert(_sender.innerHTML);
}
}
and assign this to the tables onclick event, like;
<table onclick="alertcontent()">
...
...
</table>
this way u can use less coding...

Here's a working solution - http://jsbin.com/wigolunowa/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border=1>
<tr>
<td onClick="alert(this.innerHTML)">Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
</table>
</body>
</html>

You can add a click handler to the table (once) and check which cell was clicked. The following example checks for cells (with "TD" tags) but can easily be changed to check for rows:
javascript
function showElementContent(event, table)
{
event = event || window.event;
for(var node = event.target || event.srcElement; node && node!= table; node = node.parentNode)
{ if(node.tagName == "TD")
break;
}
alert(node.innerText);
}
html
<table onclick="showElementContent(event, this)">
<tbody>
<tr><td>a cell</td>
<td>a cell with a <span>spanned element</span></td>
</tr>
</tbody>
</table>

You can just try adding an "OnClick" event to every single <td> with an alert to its innerHTML, something like this:
<td onclick="alert('Your value is '+this.innerHTML)">1</td>
<td onclick="alert('Your value is '+this.innerHTML)">ABC</td>
Or you can create JS function that loops through all the <td> cells (you select them by tag) and get their values:
var myCell = document.getElementsByTagName('td');
for(var i=0; i<=myCell.length; i++){
myCell[i].addEventListener('click', valueOnClick);
}
function valueOnClick(){
alert('Your value is '+this.textContent);
}

This is probably way too late to help but it's an approach not suggested by others and might be of use to someone else. At the very least it's an interesting way of using the DOM and "this" keyword to identify elements by relative positioning and not using an explicit element id.
Making a slight change to the HTML, use keyword "this" as an argument for your JavaScript function.
<table>
<tr>
<td onclick="myfunc(this)">Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
</table>
The JavaScript function then takes advantage of the parent element/node to get the <tr> that the <td> resides within. Once we have the row we can get the number of cells and loop over each <td> element within the <tr> and get the text content within.
In the example below I'm assuming that the format for the alert message should just be a string of all the <td> elements on a row, but this would also be trivial to modify for a JSON or other format of output.
function myfunc(td_ele){
var td_row = td_ele.parentNode; //From button_ele get it's parentNode e.g. the <tr> element
var alert_msg = "";
//Iterate over the rows cell length
for(i=0; i<td_row.cells.length; i++){
alert_msg += td_row.cells[i].firstChild.textContent + " "; //stitch together alert_msg taking each rows cell child elements text
}
alert(alert_msg);
}

Adding event handlers to each table row that will affect only that table row?

This isn't actually something I'm currently attempting to do; it just occurred to me while working with another table that I have no idea how I'd go about doing it, and the entire time on the train ride home I was puzzling over different solutions, none of which I could imagine working.
Imagine this situation: there is a table of 50 rows. On each row is a button. When clicked, this button should do something to the row it's on -- say, make all its text strikethrough, or make an AJAX call with the first cell's value, or something.
How would you go about binding those event handlers?
My initial thought was something like
buttons = document.getElementsByTagName("input");
rows = document.getElementsByTagName("tr");
for (i=0;i<buttons.length;i++) {
buttons[i].addEventListener('click',function() {
makeAjaxCall(rows[i]);
});
};
That is,
For each button in the document,
Add an event handler to that button,
Which will makeAjaxCall with the data of the row whose number corresponds to the button.
The problem, of course, being that makeAjaxCall will check the value of i when it's invoked, by which time, i is equal to buttons.length, and so the function will only ever work on the final row of the table.
So I suppose you'd need to find some way to actually hard-code the current value of i within the function handler... and that's something I don't even think is possible. Is it? How would you actually do something like this?

You can refer to the button object you are adding the event listener to using 'this'
Given the table in this format
<table>
<tr>
<td> <input type='button'> </td>
<td> 1st <td>
</tr>
<tr>
<td> <input type='button'> </td>
<td> 2nd <td>
</tr>
<tr>
<td> <input type='button'> </td>
<td> 3rd <td>
</tr>
</table>
The following code will allow you to access the data in the next cell, shown using console.log() rather than any ajax calls of course.
buttons = document.getElementsByTagName("input");
for (i=0;i<buttons.length;i++) {
buttons[i].addEventListener('click',function() {
makeAjaxCall(this);
});
};
function makeAjaxCall(btn) {
var sib=btn.parentNode.nextSibling;
while (sib.nodeName !='TD') {
sib=sib.nextSibling;
}
console.log(sib.innerHTML);
}
This can be extended to find any data in the row.
This section
while (sib.nodeName !='TD') {
sib=sib.nextSibling;
}
skips any extraneous characters (white space etc) between cells.
Fiddle Here

Interesting problem. I would go about doing it the way #kennebec suggests in the comment above.
Here is the fiddle: http://jsfiddle.net/u988D/
First, a slight change in markup to add data attributes
HTML
<table>
<tr>
<td data-to-json="id">1</td>
<td data-to-json="text">Lorem ipsum dolor.</td>
<td><button type="button">Click Me</button></td>
</tr>
<tr>
<td data-to-json="id">2</td>
<td data-to-json="text">Lorem ipsum dolor.</td>
<td><button type="button">Click Me</button></td>
</tr>
<tr>
<td data-to-json="id">3</td>
<td data-to-json="text">Lorem ipsum dolor.</td>
<td><button type="button">Click Me</button></td>
</tr>
</table>
Then the javascript. Probably can be optimized a bit more.
JS
var table = document.querySelector("table")
table.addEventListener("click", function(e) {
var element = e.target,
parent
//If the element is a button
if ( element && element.nodeName == "BUTTON" ) {
parent = element.parentNode
//Find the closest parent that is a TR
while ( parent.nodeName !== "TR" ) {
parent = parent.parentNode
}
//Convert Row to JSON
var json = {},
child
for ( var i = 0, _len = parent.children.length; i < _len; i++ ) {
child = parent.children[i]
if ( child.hasAttribute("data-to-json") ) json[child.getAttribute("data-to-json")] = child.innerText
}
// Do your AJAX stuff here
console.log(json)
}
})

not able to retrieve the value of other rows than the first row from a html table using javascript

I am trying to get the value of a hidden input inside a tag in html table element through javascript in a MVC view. i have get the respective value of the hidden input which is in a loop,when the the respective row is clicked. I have tried many codes but it returns the value of the first row alone for all the rows in the table. i tried the following:
#foreach (var item in Model)
{
<tr>
<td hidden><input value="#item.QuoteId" id="QuoteID" class="QuoteID"> </td>
</tr>
}
javascript:
$("tr").click(function () {
var quoteid=document.getElementById("#QuoteID").innerHTML
alert(quoteid);
alert($('.QuoteID').val());
}
if my db contains 3 values for quote,say 12,17,18.. it alerts 12 for all the row clicks.. Pls help,I am literally stuck. I have been trying it from 3 days,i cant figure it out. I guess it is some simple mistake from my side. Pls help. I am not able to finish the work assigned to me because of this simple error.

You're using the same id multiple times. The ID has to be unique!! To make this to work you could call the unique id, or put a onclick on the specific row and call your function with this. In your function you can use this.value.
<script>
function ShowMeThePower(myElement) {
alert(myElement.innerHTML);
}
</script>
<div onclick="ShowMeThePower(this);">This is great!</div>
http://jsfiddle.net/3RJVd/
Edit:
To satisfy the OP:
<table>
<tr>
<td><input type="text" id="show1" value="test1" /></td>
</tr>
<tr>
<td><input type="text" id="show2" value="test2" /></td>
</tr>
</table>
<script>
for (var i = 1; i < 3; i++){
alert(document.getElementById('show' + i).value);
}
</script>
If you see, it's the same logic. Just be sure to use unique id's.
http://jsfiddle.net/4gMy6/