Javascript 如何在tr表中获取id？jquery

如何获取表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>

我指的是这些id值​​在这里：

id=“名称”

id=“权限”

id=“说明”

---

如何获取值名称或权限或说明？

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

$（函数（）{
$（“#基本”）。在（“单击”上，函数（e）{
变量$self=$（即目标）；
如果（$self.is（“td”））{
console.log（“在行ID中单击：+$self.closest（“tr”）.attr（“ID”））；
}
});
})

名称
权限
描述
行动
传感器
0
--
传感器
0
传感器。。。
波戈达
0
xxx

谢谢你的回答，我会尖叫所有的代码来解释我的问题

这是用于编辑ajax页面导航的表，问题出现在要编辑的记录的标识上

看看这个：

$（文档）.ready（函数（）{
编辑器=新的SimpleTableCellEditor（“基本”）；
SetEditableClass（“editMe”）；
$（'#basic'）。打开（“单元格：已编辑”，函数（事件）{
var newval=event.newValue；
//警报（`${event.oldValue}'更改为`${event.newValue}`）；
$.post（“test.php”{
id:“1或2或3”//TR id或
name:“permissions”//html不符合web标准。
id
应该是唯一的。如果html在您的权限范围内可以更改，您应该使用类。此外，事件处理程序中的
this
是
#basic
元素。
tr
是子元素，因此
最接近（'tr'））
不会找到任何最近的（'tr'）。attr（'id'）；

只返回tr值，correct@TwitchThis由于

$（“#basic”）

是回调的目标，

this

和

$（this）

将引用该元素。因此，

$（this）.closest（“tr”）

为

null

且未选择元素。

$（this）。find（“tr”）

将生成所有选定的行元素。我想您需要

$（event.target）.最近的（“tr”）.attr（“id”）

进行正确选择。

  $(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 
   // 

  });

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

  <script src="https://www.jqueryscript.net/demo/inplace-editing-table-simpletablecelleditor/SimpleTableCellEditor.js"></script>
<script>
$(document).ready(function() {
    editor = new SimpleTableCellEditor("basic");
    editor.SetEditableClass("editMe");
    $('#basic').on("cell:edited", function(event) {
        var newval = event.newValue;

        //alert(`'${event.oldValue}' changed to '${event.newValue}'`);
        $.post("test.php", {
                id: "1 or 2 or 3",       // TR id  <tr id="1" data-node-id="1.1" data-node-pid="1"> or  <tr id="2" data-node-id="1.2" data-node-pid="1">
                name: "permissions", // <-- How to get name="name" or name="permissions" or name="description"
                val: newval,  // <-- value of name , permissions , description
            })
            .done(function(data) {
                alert("Data Loaded: " + data);
            });




    });
});
</script>
<script src="https://www.jqueryscript.net/demo/simple-tree-table/jquery-simple-tree-table.js"></script>
<button type="button" id="expander" class="btn btn-danger">expand</button>
<button type="button" id="collapser" class="btn btn-info">collapse</button>
<div class="table-responsive">
    <div id="tabela">
        <table id="basic" class="table table table-sm">
            <thead>
                <tr>
                    <th scope="col" width="20%">Name</th>
                    <th scope="col" width="5%">Permissions</th>
                    <th scope="col" width="30%">Description</th>
                    <th scope="col" width="10%">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr bgcolor="#1E1E2F" 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 name="name" class="editMe">Weather</td>
                    <td name="permissions" class="editMe">0</td>
                    <td name="description" class="editMe">Weather sensors</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 name="name" class="actionclass editMe">CPU sensors</td>
                    <td name="permissions" class="editMe">0</td>
                    <td name="description" class="editMe">cpu sensors</td>
                    <td><a class="mdi mdi-delete-forever" href="#"></a></td>
                </tr>
                <tr data-node-id="1.2" data-node-pid="1">
                    <td><input type="text" placeholder="Permissions..." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Permissions..." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Description..." class="form-control form-control-xs"></td>
                    <td><button type="submit" name="Edit" value="1" class="btn btn-success btn-xss">Add</button></td>
                </tr>
                <tr bgcolor="#1E1E2F" data-node-id="2">
                    <td>Cams</td>
                    <td class="editMe">0</td>
                    <td></td>
                    <td class="editMe">--</td>
                </tr>
                <tr id="3" data-node-id="2.1" data-node-pid="2">
                    <td name="name" class="actionclass editMe">Home cam</td>
                    <td name="permissions" class="editMe">0</td>
                    <td name="description" class="editMe">garden</td>
                    <td><a class="mdi mdi-delete-forever" href="#"></a></td>
                </tr>
                <tr data-node-id="2.1" data-node-pid="2">
                    <td><input type="text" placeholder="Permissions..." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Permissions..." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Description..." class="form-control form-control-xs"></td>
                    <td><button type="submit" name="Edit" value="1" class="btn btn-success btn-xss">Add</button></td>
                </tr>
                <tr bgcolor="#1E1E2F">
                    <td><input type="text" placeholder="Category name.." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Permissions..." class="form-control form-control-xs"></td>
                    <td><input type="text" placeholder="Description..." class="form-control form-control-xs"></td>
                    <td><button type="submit" name="Edit" value="1" class="btn btn-success btn-xss">Add</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    $('#basic').simpleTreeTable({
        expander: $('#expander'),
        collapser: $('#collapser'),
        storeState: true
    });
</script>