Javascript Zugriff TR von TD

Question

Ich habe eine Tabellenzeile, und innerhalb dieser habe ich eine td (was auch immer es steht). Ich möchte das Klassenattribut des TR ändern, in dem sich mein TD befindet, ohne eine ID oder einen Namen zu verwenden. So ähnlich:

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

Wie mache ich das?

Answer 1

td steht für Tabellendaten ..

jetzt .. in Ihrem Fall müssen Sie die parentNode Eigenschaft des td ..

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

oder als bobince gesetzt vorgeschlagen in seinem Kommentar

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

Answer 2

jQuery ist wahrscheinlich der einfachste Weg, dies zu tun, Sie Selektoren wie verwenden können:

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

So fügen Sie eine Klasse von ‚rot‘ auf alle tr des in table.mytable. Das ist nur die Spitze des Eisbergs - schau es dir an, es sollte tun, was du brauchst.

Answer 3

In jquery, wäre es wirklich einfach, wenn Sie den Verweis auf Ihre td haben:

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

Wenn Sie wirklich eine Abhängigkeit von jQuery nehmen Sie nicht wollen, dann könnte man einfach eine Schleife tun bekommen der parentNode und die Überprüfung des Typs als allgemeinere Lösung. In diesem Fall könnten Sie einfach den Elternknoten erhalten, da tr immer ein direkter Elternteil von td ist. Sie können etwas tun (man beachte dies nicht getestet wurde):

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

Answer 4

Wenn Sie jQuery verwenden kann es so etwas wie dieses

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

Für Ihren Code

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

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

Answer 5

werden könnten, ohne irgendein zusätzliches Rahmenwerk:

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

Answer 6

Wenn Sie das dom-Element in JavaScript haben, können Sie .parentNode() verwenden, was Ihnen den perant-Knoten gibt, der die Tabellenzeile sein sollte. dann können Sie .className