Question

function getItems() {
  let name = inputVal.value;
  console.log(name);
  clearTable();
  $.ajax({
    type: "GET",
    url: "../php/includes/search.php",
    dataType: "json",
    data: { "name": name },
    success: function (data, status) {
      if (data == false) {
        clearTable();
      } else {
        for (let i = 0; i < data.length; i++) {
          createRow(i, data[i].name, data[i].Item_Id);
        }

        if ($('td').hasClass('cell4')) {
          $('.cell4').append('<button class="btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold" data-summary="test" data-quantity="1"><i class="fas fa-shopping-cart fa-lg align-middle mr-1"></i>Add to cart</button>');
        }
      }
    },
    complete: function (data, status) {
      console.log(status);
    }
  });
}

function createRow(id, name, Item_Id) {
  let row = table.insertRow(id);

  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);

  cell1.appendChild(document.createTextNode(id));
  cell2.appendChild(document.createTextNode(name));
  cell3.appendChild(document.createTextNode(Item_Id));
  $(cell2).addClass('cell1');
  $(cell2).addClass('cell2');
  $(cell3).addClass('cell3');
  $(cell4).addClass('cell4 text-center');
}

此代码到目前为止工作，但现在我想将数据属性添加到按钮，以便它匹配它所放置的行。

在添加值时我会想到这样的事情：

$('.btn-addToCart').attr("data-id", Item_Id);
$('.btn-addToCart').attr("data-name", name);

但是我怎么能动态地这样做呢，它可以循环遍历每一行并匹配cell2和cell3中的行信息，然后创建一个连接到该行的按钮？希望你明白我的意思。

Answer 1

您可以创建附加功能<button>中的createRow以及必需属性。

function createRow(id, name, Item_Id) {
    ......

    var button = $('<button><i class="fas fa-shopping-cart fa-lg align-middle mr-1"></i>Add to cart</button>', {
            "class": "btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold"
        });

    button.attr("data-summary", "test");
    button.attr("data-quantity", 1);
    button.attr("data-id", Item_Id);
    button.attr("data-name", name);

    $(cell4).addClass('cell4 text-center').append(button)
}

并删除以下声明

            if ($('td').hasClass('cell4')) {
              $('.cell4').append('<button class="btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold" data-summary="test" data-quantity="1"><i class="fas fa-shopping-cart fa-lg align-middle mr-1"></i>Add to cart</button>');
            }

添加具有与行信息匹配的动态数据属性的按钮

1 个答案: