如何在DataTable每行渲染表单并获取对应行Oid编辑后的值？

我有一个从后端获取数据并在DataTable中展示的页面。表格中有一列名为Oid，是一个带有后端返回初始值的输入框，另有一列是按钮。如何实现一个函数，使得点击任意行的按钮时，能获取对应行Oid输入框的当前值（需为编辑后的值而非后端返回的初始值）？

现有代码 #

HTML代码 #

<head>
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<div class="container">

  <table id="mwdata" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Market Name</th>
        <th>Coin Name</th>
        <th>Main Market</th>
        <th>Market Type</th>
        <th>Exchange</th>
        <th>Bid Price</th>
        <th>OID</th>
        <th>Update</th>
      </tr>
    </thead>
  </table>
</div>

JavaScript代码 #

let page = 1;
var exchange = "all";
var search = "";
var urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;

function loadTable() {
  urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
  $(document).ready(function() {
    $('#mwdata').DataTable({
      "processing": true,
      "serverSide": true,
      "pageLength": 15,
      "ajax": {
        "data": function(d) {
          var info = $('#mwdata').DataTable().page.info();
          page = info.page + 1;
          search = d.search.value;
          urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
          console.log(urlPage, page, 'SEARCH', search);
          $('#mwdata').DataTable().ajax.url(urlPage);
          page = info.page + 1;
          console.log(page);
        }
      },
      "columns": [{
          "data": "MarketName"
        },
        {
          "data": "CoinName"
        },
        {
          "data": "MainMarket"
        },
        {
          "data": "MarketType"
        },
        {
          "data": "Exchange"
        },
        {
          "data": "Bid"
        },
        {
          "data": "Oid",
          "render": function(data, type, row) {
            return "<input type='text' class='form-control' value='" + data + "'>";
          }
        },
        {
          "data": null,
          "defaultContent": "<button class='btn btn-primary'>Update</button>"
        }

      ]
    });
  });
}

function setExchange() {
  exchange = document.getElementById("exchanges").value;
  // reload the table
  $('#mwdata').DataTable().ajax.reload();
}

loadTable();

解决方法 #

由于DataTable是动态渲染行，直接给按钮绑定点击事件会失效，必须用事件委托处理。按以下步骤修改代码：

1. 给Oid输入框添加专属类名oid-input，给按钮添加专属类名update-btn，简化DOM定位；
2. 给表格绑定事件委托，监听update-btn的点击事件，通过按钮找到所在行的oid-input，读取实时输入值；
3. 可在事件处理函数中加入后续逻辑（如提交到后端）。

修改后的完整JavaScript代码 #

let page = 1;
var exchange = "all";
var search = "";
var urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;

function loadTable() {
  urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
  $(document).ready(function() {
    $('#mwdata').DataTable({
      "processing": true,
      "serverSide": true,
      "pageLength": 15,
      "ajax": {
        "data": function(d) {
          var info = $('#mwdata').DataTable().page.info();
          page = info.page + 1;
          search = d.search.value;
          urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
          console.log(urlPage, page, 'SEARCH', search);
          $('#mwdata').DataTable().ajax.url(urlPage);
          page = info.page + 1;
          console.log(page);
        }
      },
      "columns": [{
          "data": "MarketName"
        },
        {
          "data": "CoinName"
        },
        {
          "data": "MainMarket"
        },
        {
          "data": "MarketType"
        },
        {
          "data": "Exchange"
        },
        {
          "data": "Bid"
        },
        {
          "data": "Oid",
          "render": function(data, type, row) {
            // 添加oid-input类名
            return "<input type='text' class='form-control oid-input' value='" + data + "'>";
          }
        },
        {
          "data": null,
          "defaultContent": "<button class='btn btn-primary update-btn'>Update</button>"
          // 添加update-btn类名
        }
      ]
    });

    // 绑定事件委托，处理按钮点击
    $('#mwdata').on('click', '.update-btn', function() {
      // 找到当前按钮所在的行
      const row = $(this).closest('tr');
      // 获取该行的Oid输入框当前值
      const currentOidValue = row.find('.oid-input').val();
      // 这里可以添加后续逻辑，比如打印或提交到后端
      console.log("当前行Oid值：", currentOidValue);
      // 示例：如果需要获取该行的其他数据，可以用DataTable的row().data()方法
      const rowData = $('#mwdata').DataTable().row(row).data();
      console.log("当前行完整数据：", rowData);
    });
  });
}

function setExchange() {
  exchange = document.getElementById("exchanges").value;
  $('#mwdata').DataTable().ajax.reload();
}

loadTable();

内容的提问来源于stack exchange，提问作者JayK23