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

TBODY を指定していない場合、ブラウザーが TBODY を挿入する可能性があることを念頭に置いて、DOM を TD から TABLE に昇格させる必要があります。したがって、コードは次のようになります。

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

デモをご覧ください。