javascript - 如何在表 tr 中获取 id？jQuery

Question

如何获取表 td 中的值 id？

<table id="basic" class="table table table-sm">
<thead>
<tr>
    <th scope="col">Name</th>
    <th scope="col">Permissions</th>
    <th scope="col">Description</th>
    <th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#FFFFFF" data-node-id="1">
    <td>Sensors</td>
    <td class="editMe">0</td><td></td>
    <td class="editMe">--</td>
</tr>
<tr id="1" data-node-id=" 1.1" data-node-pid="1">
    <td id="name" class="editMe">Sensors</td>
    <td id="permissions" class="editMe">0</td>
    <td id="description" class="editMe">Sensorss...</td>
    <td><a class="mdi mdi-delete-forever" href="#"></a></td>
</tr>
<tr id="2" data-node-id=" 1.2" data-node-pid="1">
    <td id="name" class="editMe">Pogoda</td>
    <td id="permissions" class="editMe">0</td>
    <td id="description" class="editMe">xxx</td>
    <td><a class="mdi mdi-delete-forever" href="#"></a></td>
</tr>

JS代码：

  $(document).ready(function() {

  editor = new SimpleTableCellEditor("basic");
  editor.SetEditableClass("editMe");

  $('#basic').on("cell:edited", function (event) {
    alert(`'${event.oldValue}' changed to '${event.newValue}'`);


    var id = parseInt($(this).closest('tr').attr('id')); // Returns TR ID 
   // 

  });

我这里指的是这些id值：

id="名称"

id="权限"

id="描述"

如何获取值名称或权限或描述？

标签： javascriptjqueryhtml

Answer 1

基于事件目标的基本示例：

$(function() {
  $("#basic").on("click", function(e) {
    var $self = $(e.target);
    if ($self.is("td")) {
      console.log("Clicked in Row ID: " + $self.closest("tr").attr("id"));
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="basic" class="table table table-sm">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Permissions</th>
      <th scope="col">Description</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr bgcolor="#FFFFFF" data-node-id="1">
      <td>Sensors</td>
      <td class="editMe">0</td>
      <td></td>
      <td class="editMe">--</td>
    </tr>
    <tr id="1" data-node-id=" 1.1" data-node-pid="1">
      <td id="name" class="editMe">Sensors</td>
      <td id="permissions" class="editMe">0</td>
      <td id="description" class="editMe">Sensorss...</td>
      <td>
        <a class="mdi mdi-delete-forever" href="#"></a>
      </td>
    </tr>
    <tr id="2" data-node-id=" 1.2" data-node-pid="1">
      <td id="name" class="editMe">Pogoda</td>
      <td id="permissions" class="editMe">0</td>
      <td id="description" class="editMe">xxx</td>
      <td>
        <a class="mdi mdi-delete-forever" href="#"></a>
      </td>
    </tr>
  </tbody>
</table>