javascript - 单击表内的输入时从 html 表中获取 id

Question

单击输入元素时如何获取表格的ID？
我不需要 rowId 等。
我试过 parentNode.id 但我似乎无法获得 id。
最后我想做这样的事情：

var tabelid = INPUT....parentNode.parentNode.id;
var table = document.getElementById(tabelid);

例子：

Answer 1

这个怎么样：-

演示

html

<table id="tblTest">
    <tr>
        <td>
            <input type="text" id="txtTest" onclick="getParent.call(this)" />
        </td>
    </tr>
</table>

我在call这里使用，以便在getParent事件回调中获取元素上下文。

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;
      }
 
  }
    
}

如果您使用的是 Jquery：-

在点击事件中你可以做$(this).closest('table').attr('id')

Answer 2

如果您使用的是 jQuery，您可以使用它closest来查找最接近的匹配祖先，如下所示：

var tableID = "";
$(document).ready(function(){
    $('input[type="text"]').click(function(e){
        tableID = $(this).closest('table').attr('id');
    });
]);

编辑：

如果您真的想对该表做一些事情（例如添加一个类），您可以执行以下操作：

$(document).ready(function(){
    $('input[type="text"]').click(function(e){
        tableID = $(this).closest('table').addClass('myClass');
    });
]);

这简单地消除了获取表 ID、存储它，然后根据它的 ID 获取表的需要。由于您已经找到该表以获取其 ID，因此您可以立即对其进行操作。

Answer 3

您必须将 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;
}

查看演示。