Javascript access TR from TD

Question

Hello. I have a table row, and within that, I have a td (whatever it stands for). I want, without an ID or a name, to be change the class attribute of the TR my TD is in. Like that:

<tr>
<td onclick="[TR].setAttribute('class', 'newName')">My TD</td>
</tr>

How do I do it?

Answer 1

jQuery is probably the easiest way of doing this, you can use selectors such as:

$('table.mytable tr').addClass('red');

To add a class of 'red' to all tr's in table.mytable. That's just the tip of the iceberg - check it out it should do what you need.

Answer 2

In jquery, it would be really simple if you have the reference to your td:

$(this).closest('tr');

If you really don't want to take a dependency on jQuery, then you could just do a loop getting the parentNode and checking it's type as a more general purpose solution. In this case you could just get the parentNode since tr is always a direct parent of td. You can do something like this (note this was not tested):

var parent = myTd.parentNode;
while(true) {
  if(parent == null) {
    return;
  }
  if(parent.nodeName = "TR") {
    return parent;
  }
  parent = parent.parentNode;
}

Answer 3

If you can use jQuery it could be something like this

$("yourtdselector").closest("tr").attr("class","classname");

For your code

<tr>
    <td onclick="changeClass(this,'classname')">My TD</td>
</tr>

function changeClass(elem, class)
{
    elem.parentNode.className = class;
}

Answer 4

Without any extra framework:

document.getElementById("theTableName").rows[1].cells[1].className = "someclassname";

Answer 5

if you are have the dom element in javascript, you can use .parentNode() then which will give you the perant node, which should be the table row. then you can set .className

Answer 6

td stands for table data..

now .. in your case you need the parentNode attribute of the td ..

<tr>
<td onclick="this.parentNode.setAttribute('class', 'newName')">My TD</td>
</tr>

or as bobince suggested in his comment

<td onclick="this.parentNode.className= 'newName'">My TD</td>