javascript 单击表内的输入时从 html 表中获取 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16464552/
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
Get id from html table when clicking an input inside the table
提问by GertV
How can you get the id of a table when you click an input element?
I don't need the rowId etc.
I've tried parentNode.id but I can't seem to get the id.
In the end I'd like to do something like this:
单击输入元素时如何获取表的 id？
我不需要 rowId 等。
我试过 parentNode.id 但我似乎无法获得 id。
最后我想做这样的事情：
var tabelid = INPUT....parentNode.parentNode.id;
var table = document.getElementById(tabelid);
Example:
例子：
回答by PSL
How about this:-
这个怎么样：-
Demo
演示
Html
html
<table id="tblTest">
<tr>
<td>
<input type="text" id="txtTest" onclick="getParent.call(this)" />
</td>
</tr>
</table>
I am using callhere so that i get the elements context inside the getParentevent callback.
我在call这里使用是为了获取getParent事件回调中的元素上下文。
Javascript
Javascript
function getParent()
{
var parent = this.parentNode;
var tagName = "table";
while (parent) { //Loop through until you find the desired parent tag name
if (parent.tagName && parent .tagName.toLowerCase() == tagName) {
alert(parent .id);
return;
}
else
{
parent = parent .parentNode;
}
}
}
If you are using Jquery:-
如果您使用的是 Jquery：-
in the click event you can just do $(this).closest('table').attr('id')
在点击事件中你可以做 $(this).closest('table').attr('id')
回答by Maloric
If you are using jQuery you can use closestto find the closest matching ancestor like so:
如果您使用的是 jQuery，您可以closest像这样找到最接近的匹配祖先：
var tableID = "";
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').attr('id');
});
]);
Edit:
编辑：
If you actually want to do something with that table (for instance add a class), you could do the following:
如果您真的想对该表做一些事情（例如添加一个类），您可以执行以下操作：
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').addClass('myClass');
});
]);
This simply removes the need to fetch the table ID, store it, and then fetch the table based on it's ID. Since you already found the table in order to get its ID you can just manipulate it right away.
这只是消除了获取表 ID、存储它，然后根据它的 ID 获取表的需要。由于您已经找到该表以获取其 ID，因此您可以立即对其进行操作。
回答by Derek Henderson
You have to ascend the DOM from TD to TABLE keeping in mind that browsers may inject a TBODY if you haven't specified it. So, your code should look something like this:
您必须将 DOM 从 TD 提升到 TABLE 请记住，如果您尚未指定，浏览器可能会注入 TBODY。所以，你的代码应该是这样的：
var tableCells = document.getElementsByTagName('td'),
cellCount = tableCells.length,
i;
for (i = 0; i < cellCount; i += 1) {
tableCells[i].onclick = function () {
var tableId = getTableId(this);
console.log(tableId);
};
}
function getTableId(node) {
var element = node;
while (element.tagName.toLowerCase() !== 'table') {
element = element.parentNode;
}
return element.id;
}
查看演示。
