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

Question

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

下面是发送请求的函数和渲染表格的函数。 我的表上有三列，当点击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/