JSFiddle - React, Tailwind, and code Playground
HTML
<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: "", // 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: "John", // <-- 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>
...