Как получить данные из одной строки из данных JQuery?

Question

Я отображаю данные из базы данных Mysql в клиентский браузер, используя php-скрипт с jquery Datatables.Когда пользователь нажимает кнопку «Обновить» внутри столбца «Изменить», я хочу взять значение ячейки строки и заполнить форму, чтобы пользователь мог обновить информацию.Основная проблема заключается в том, что jquery on.('click', 'button', function) не хочет получать данные table.row.Хотя работает функция нажатия.

Я пытался:

PHP-скрипт, который отображает таблицу:

<table id="usert"  class="display" style="width:100%">
                <thead>
                    <th>Id</th>
                    <th>User</th>
                    <th>Usernames</th>
                    <th>Email</th>
                    <th>Employee</th>
                    <th>Product</th>
                    <th>Admin</th>
                    <th>Active</th>
                    <th>Edit</th>
                </thead>
                <tbody>
                    <?php
                        //Select all users names from database and populate the select tag
                        include_once './db/dbconnect.php';
                        include_once './db/website/dbfunc_web.php';
                        $db = connectBlind();
                        $users_i = findUsers($db);
                        $cnt = 0;
                        if ($users_i != false) {
                            foreach ($users_i as $key => $value) {
                                $cnt ++;
                                echo "<tr>";
                                echo "<td>".$cnt."</td>";
                                echo "<td>".$key."</td>";
                                foreach ($value as $key => $val) {
                                    if ($key === 'emp_priv' || $key === 'prod_priv' || $key === 'admin_priv' || $key === 'active') {
                                        if ($val === 1) {
                                            echo "<td>Yes</td>";
                                        } else {
                                            echo "<td>No</td>";
                                        }
                                    } else {
                                        echo "<td>".$val."</td>";
                                    }

                                }
                                echo "<td><button style="."'background-color: #3CB371; border: none; color: white; font-size: 14px; padding: 8px 10px; border-radius: 8px;'".">Update</button></td>";
                                echo "</tr>";
                            }
                        }
                    ?>

jquery функции:

$(document).ready( function () {
            $('#usert').DataTable();
        });

        $('#usert tbody').on( 'click', 'button', function () {
            var data = table.row( $(this).parents('tr') ).data();
            window.alert( data[1]);
        } );

Я хочу получитьединичные table.row данные определенной кнопки Обновить нажали?

Answer 1

Вы можете получить <tr>, используя closest(), а затем get(), чтобы получить каждый индекс.

$('button').on('click', function() {
  let td = $(this).closest('tr').find('td');
  let result = {
    id: td.get(0).innerText,
    user: td.get(1).innerText,
    username: td.get(2).innerText
  };
  console.log(result)
});

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

<table>
  <thead>
    <th>Id</th>
    <th>User</th>
    <th>Usernames</th>
    <th>Edit</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jon</td>
      <td>jon_bob</td>
      <td><button>Edit</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>bob</td>
      <td>bob_jon</td>
      <td><button>Edit</button></td>
    </tr>
  </tbody>
</table>