来自 TD 的 Javascript 访问 TR

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2524317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:44:38  来源:igfitidea点击:

Javascript access TR from TD

javascripthtmldom

提问by arik

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

我有一个表格行,在其中,我有一个 td(无论它代表什么)。我想在不使用 ID 或名称的情况下更改我的 TD 所在的 TR 的类属性。像那样:

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

How do I do it?

我该怎么做?

回答by Gabriele Petrioli

tdstands for table data..

td代表表数据..

now .. in your case you need the parentNodeproperty of the td..

现在 .. 在你的情况下,你需要..的parentNode财产td

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

or as bobince suggested in his comment

或者正如 bobince 在他的评论中所建议的那样

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

回答by Keith Rousseau

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

在 jquery 中,如果您有对 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):

如果你真的不想依赖 jQuery,那么你可以做一个循环来获取 parentNode 并检查它的类型作为更通用的解决方案。在这种情况下,您可以只获取 parentNode,因为 tr 始终是 td 的直接父节点。你可以做这样的事情(注意这没有经过测试):

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

回答by thecoshman

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

如果你在 javascript 中有 dom 元素,你可以使用 .parentNode() 然后它会给你 perant 节点,它应该是表行。然后你可以设置 .className

回答by rahul

If you can use jQuery it could be something like this

如果你可以使用 jQuery,它可能是这样的

$("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;
}

回答by Joop

Without any extra framework:

没有任何额外的框架:

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

回答by DCD

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

jQuery可能是最简单的方法,您可以使用选择器,例如:

$('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.

向 table.mytable 中的所有 tr 添加一类“红色”。这只是冰山一角 - 检查它应该可以满足您的需求。