2010-03-26 2 views
11

У меня есть строка таблицы, и в этом я имею td (что бы это ни было). Я хотел бы изменить атрибут класса TR моего TD, не используя идентификатор или имя. Например:Доступ Javascript TR от TD

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

Как это сделать?

+2

тегов для данных таблицы – thecoshman

+2

удивительно, сколько ответов пошли straigh t для jQuery (несмотря на то, что это самая простая вещь, которую можно сделать даже в простой старой DOM), а затем все еще не соответствует синтаксису! – bobince

+0

Это потому, что ответ был изменен после того, как были заданы некоторые вопросы. – Joop

ответ

27

td стенды для данных таблицы ..

сейчас .. в вашем случае вам нужно parentNode свойство td ..

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

или bobince предложил в своем комментарии

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

+1 для решения проблемы с использованием идентификатора (как указано в запросе) или полагающегося на JQuery – thecoshman

+0

PERFECT! таблица данные ... посмотрю. Спасибо! – arik

+6

'setAttribute ('class')' не работает правильно в IE6-7. Существует множество атрибутов, в которых IE ошибается: по этой причине избегайте 'getAttribute' /' setAttribute' в документах HTML. Вместо этого используйте свойства HTML DOM Level 1: 'this.parentNode.className = 'newName'' более совместим и читаем. – bobince

-3

jQuery, вероятно, самый простой способ сделать это, вы можете использовать селекторы, такие как:

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

Чтобы добавить класс «красного» ко всем ТР в table.mytable. Это всего лишь верхушка айсберга - убедитесь, что он должен делать то, что вам нужно.

+0

Это вообще не отвечает на вопрос. Вы в основном просто сказали ему пойти посмотреть, как использовать jQuery. Не полезно вообще. –

11

В JQuery, было бы очень просто, если у вас есть ссылка на ваш тд:

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

Если вы действительно не хотите, чтобы принять зависимость от JQuery, то вы можете просто сделать цикл получения parentNode и проверка его типа как более общего решения. В этом случае вы можете просто получить parentNode, поскольку tr всегда является прямым родителем td. Вы можете сделать что-то вроде этого (заметьте это не тестировалось):

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

вы понимаете, что если у вас есть HTML- тогда все те одни и те же родителя, они не являются вложенными друг под другом. Они братья и сестры. – thecoshman

+0

Да, я исправил ответ, отметив, что мой сценарий более общего назначения. –

+0

Должно быть parent.nodeName === "TR", а не parent.nodeName = "TD" – Ms2ger

0

Если вы можете использовать JQuery это может быть что-то вроде этого

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

Для кода

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

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

Без любая дополнительная рама:

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

Это не получается на основе td. –

1

, если у вас есть элемент dom в javascript, вы можете использовать .parentNode(), после чего он даст вам узел perant, который должен быть строкой таблицы. то вы можете установить .className

+3

Это на самом деле parentNode. –

+0

Спасибо, обновлено. – thecoshman

+0

в javascript это просто: ** document.getElementById ("someTDitem"). ParentNode.style.background = '# 77dd77'; ** – Fattie