How to get id in table tr? jquery

Question

how to get value id in table td?

<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 code:

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

  });

I mean these id values here:

id="name"

id="permissions"

id="description"

How to get value name or permissions or description?

https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page Your html does not meet web standards. `id` are expected to be unique. If the html is at all within your power to change, you should use classes instead. — Taplar, Jan 03 '20 at 18:44
Also the `this` within your event handler is the `#basic` element. The `tr` are children so `closest('tr')` is not going to find anything — Taplar, Jan 03 '20 at 18:46
```closest('tr').attr('id')); ``` just returns value tr , correct — TwitchThis, Jan 03 '20 at 18:49
@TwitchThis since `$("#basic")` is the target of the callback, `this` and `$(this)` would refer to that element. Therefore, `$(this).closest("tr")` is `null` and does not select an element. `$(this).find("tr")` would result in all selected Row elements. I think you want `$(event.target).closest("tr").attr("id")` for proper selection. — Twisty, Jan 03 '20 at 20:02

score 0 · Answer 1 · answered Jan 03 '20 at 20:07

Basic example based on Event Target:

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

score 0 · Answer 2 · answered Jan 04 '20 at 10:12

Thank you for the answers, I'll scream all the code to explain my problem.

This is to be the table for editing the navigation of the ajax page, the problem appears in the identification of the record to be edited.

Look at this: https://jsfiddle.net/faoyxbn0/

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

How to get id in table tr? jquery

2 Answers2