How do I get the cell value from a table using JavaScript?

Question

<td> <input type="button" name="buton" id="x2" value="2" onclick="swap(id)";/> </td>

This is the button in a table when it is clicked it's id is passed as parameter to function "swap" as below:

  function swap(x)
  { 
   document.write(x);
  }

It is successful in getting the id but not the value;when i am trying in this way:

  function swap(x)
  { 
   document.write(x.value);
  }

The output is shown as undefined. Can you tell me how to get the cell value using the cell id?

Answer 1

If you are passing the id of the element you might want to use document.getElementById(x) to access it.

Answer 2

z = document.getElementById(id); first, and then you should be able to use z.firstChild.textContent

Answer 3

I believe that what you are looking for is document.getElementById(x).value; Also if you want the button just pass this to the function like this:

<button onclick="foo(this)"/>

Answer 4

You need to get the cell using var cell = document.getElementById(x). Then use cell.firstChild.nodeValue.

function swap(x)
{ 
    var cell = document.getElementById(x);
    document.write(cell.firstChild.nodeValue);
}

EDIT: Tested this on both FF3.5 and IE8 and it works.

Answer 5

I guess use jQuery for the purpose,it allows to traverse in DOM very easily.

<table id="mytable">
<tr><th>Customer Id</th><th>Result</th></tr>
<tr><td>123</td><td></td></tr>
<tr><td>456</td><td></td></tr>
<tr><td>789</td><td></td></tr>
</table>

If you can, it might be worth using a class attribute on the TD containing the customer ID so you can write:

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 }

Essentially this is the same as the other solutions (possibly because I copypasted), but has the advantage that you won't need to change the structure of your code if you move around the columns, or even put the customer ID into a < span >, provided you keep the class attribute with it.

By the way, I think you could do it in one selector:

$('#mytable .customerIDCell').each(function()
{
  alert($(this).html());
});

If that makes things easier

Code will be more or less more reliable on cross bowser issue