【问题标题】:How to delete two "tr" rows with js?如何用js删除两个“tr”行?
【发布时间】:2021-11-30 05:03:14
【问题描述】:

当我将产品删除到购物篮时,产品删除成功但公司名称没有删除。我正在使用 JavaScript。我无法解决问题,请帮助我...

function getCurrentRow(t) {
  var v = parseInt($.trim(t.attr("data-row-id")));
  if (isNaN(v)) {
    console.log("data-row-id:null");
    return null;
  }
  var currentRow = getRow(v);
  if (currentRow == null) {
    console.log("currentRow:null");
    return null;
  }
  return currentRow;
}

// Delete
basketContainer.on('click', 'button[data-button-name="delete"]', function() {
  var o = $(this);

  var t = o.closest("tr");

  var currentRow = getCurrentRow(t);
  if (currentRow == null) {
    return;
  }
  postData(t, currentRow.index, {
    "basketid": currentRow.id,
    "pdoductid": currentRow.ProductID,
    "count": 0,
    "cmdtype": cmdTypes.Delete
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <thead>
    <tr data-row-id="item.id">
      <td colspan="4" style="color: #d53434">Shop: <strong>Shop name</strong></td>
    </tr>
  </thead>

  <tbody>
    <tr role="row" data-row-id="item2.id">
      ...
    </tr>
  </tbody>
</table>

【问题讨论】:

  • 我给你做了一个sn-p。请将其设为minimal reproducible example 添加您的按钮和 CSS 以及相关的 HTML
  • getRow 在哪里以及为什么你有 2 个函数来做你已经用 var t = o.closest("tr"); 做的事情
  • 这是调用 Shop Name 和其他产品。当我删除产品时,商店名称不会被删除。你能帮我吗
  • 我该如何解决这个问题?当我在 tbody 中删除产品时,它必须删除 thead 行吗?

标签: javascript html asp.net c#-4.0


【解决方案1】:

你的意思是当那家商店没有更多产品时移除桌子?

$("#basketContainer").on('click', 'button[data-button-name="delete"]', function() {
  const $tr = $(this).closest("tr");
  const $tb = $(this).closest("tbody");
  $tr.remove()
  if ($tb.find("tr").length === 0) $tb.closest("table").remove()

});
table {
  border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="basketContainer">
  <table>
    <thead>
      <tr data-row-id="item.id">
        <td colspan="4" style="color: #d53434">Shop: <strong>Shop name 1</strong></td>
      </tr>
    </thead>

    <tbody>
      <tr role="row" data-row-id="item2.id">
        <td><button type="button" data-button-name="delete">Delete</button></td>
      </tr>
      <tr role="row" data-row-id="item2.id">
        <td><button type="button" data-button-name="delete">Delete</button></td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr data-row-id="item.id">
        <td colspan="4" style="color: #d53434">Shop: <strong>Shop name 2</strong></td>
      </tr>
    </thead>

    <tbody>
      <tr role="row" data-row-id="item2.id">
        <td><button type="button" data-button-name="delete">Delete</button></td>
      </tr>
      <tr role="row" data-row-id="item2.id">
        <td><button type="button" data-button-name="delete">Delete</button></td>
      </tr>
    </tbody>
  </table>

</div>

【讨论】:

  • 为什么要为 2 人写表?
  • @Shqiptar 为例
  • if ($tb.find("tr").length === 0) $tb.closest("table").remove() 它不起作用你能帮我更多吗?
  • 所有数据删除
  • it doesn't work 是什么意思。它在这里工作,所以也许你还有其他错误?控制台中有任何内容?
猜你喜欢
相关资源
最近更新 更多
热门标签