使用带有 HTML 数据表的 Javascript 提交表的数据

Question

我有一个简单的数据表，其中显示了从 API 接收到的一些 JSON 数据。我编辑了我的表格，因此对于每一行，都有一个按钮，当点击该按钮时，将向包含该特定行的值的 URL 发送 Ajax 请求。

下面是发送请求的函数，以及渲染表格的函数。我的桌子上有三列，当点击X 按钮时，该行的id 列的值将作为 Ajax 请求发送到外部 URL。

此代码有效，但唯一的问题是，连同id 的值，我想编辑表格，以便在按下按钮时发送item 列的值加上id，这样我的ajax请求就可以发送item和id，而不仅仅是id。有人可以给我一些关于如何做到这一点的建议吗？提前致谢！

$(document).ready(function() {
  $(document).on('click', '.btnClick', function() {
    var statusVal = $(this).data("status");
    console.log(statusVal)

    callAJAX("/request_handler", {
      "X-CSRFToken": getCookie("csrftoken")
    }, parameters = {
      'orderid': statusVal
    }, 'post', function(data) {
      console.log(data)
    }, null, null);

    return false;
  });

  let orderstable = $('#mytalbe').DataTable({
    "ajax": "/myview",
    "dataType": 'json',
    "dataSrc": '',
    "columns": [{
      "data": "item"
    }, {
      "data": "price"
    }, {
      "data": "id"
    },],
    "columnDefs": [{
      "targets": [2],
      "searchable": false,
      "orderable": false,
      "render": function(data, type, full) {
        return '<button type="button" class="btnClick sellbtn" data-status="replace">X</button>'.replace("replace", data);
      }
    }]
  });
});

Answer 1

使用 html 数据属性，然后从正在单击/处理的行中获取它们，然后将其发送。

<col data-item="$thisItem" id="a1" ><button class='a1' /></col>
$.click((e) => {
  let class = "a1"; // use the relevant references or use jQuery's parent(), etc
  let colId = $("col#"+class);
  let data = colId.data['data-item']; // this way you have your item info in the scope, and you can send it.

来自：https://api.jquery.com/data/