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

Question

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

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

示例：

Answer 1

这个怎么样： -

Demo

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

Check out the demo