单击后如何删除特定行 | Javascript

Question

I have a table with orders that is automatically generated and looks like this:我有一个自动生成的订单表，如下所示：

function orderHandlers() {
    $.ajax({
        url: "/order",
        type: "GET",
        contentType: "application/json",
        success: function(data) {
            const states = {
                "new": "Не оплачен",
                "paid": "Оплачен",
                "assembly": "В сборке",
                "delivery": "В доставке",
                "delivered": "Доставлен",
                "disputed": "Оспаривается"
            }


            for (let item of data) {
                if (item.timestamp) item.datetime = new Date(item.timestamp).toLocaleString('ru-RU');
                item.state = states[item.order] || "Неизвестен";
                item.amount = item.amount + ' ₽';
                item.actions = '';
                
                if (item.state === 'Не оплачен') {
                        item.actions = `
                    <a href="./orderCancel.html"  class="item-action-btn"> Отменить заказ </a>
                    `;
                    }
                    if ((item.state === 'Оплачен') || (item.state === 'В сборке') || (item.state === 'В доставке')) {
                        item.actions = "";
                    }
                    if (item.state === 'В сборке') {
                        item.actions = `<a href="" class="item-action-btn"> Задать вопрос </a>`;
                    }
                    if (item.state === 'Доставлен') {
                        item.actions = `<a href="" class="item-action-btn"> Связаться с менеджером </a>`;
                }
            }

            $('.catalog-message').hide();

            console.log('[Orders]', data);
            renderTable('#user-orders', data, [{
                    data: '_id'
                },
                {
                    data: 'datetime'
                },
                {
                    data: 'state'
                },
                {
                    data: 'amount'
                },
                {
                    data: 'actions'
                }
            ]);

            

            $('#user-orders').show();
        },
        error: function(error) {
            renderTable('#user-order', [], []);
            console.log('[Error]', error.responseText);
            showToast(error.responseText);
        }
    });
}

As you can see I have added a link for a cancelation option but I can't get my head around this: how do I actually cancel (pop this object out of Orders array) the order when I click on one of the 'Cancel order' buttons如您所见，我添加了一个取消选项的链接，但我无法理解这一点：当我单击“取消订单”之一时，如何实际取消（将这个对象从订单数组中弹出）订单' 纽扣

Edit: added a pic of the table编辑：添加了一张桌子的照片

Answer 1

You'll need an onclick event handler for the anchor, but you'll need to be able to get an identifier from that row if you're looking for the server side to agree with the client side.您需要一个用于锚点的 onclick 事件处理程序，但如果您正在寻找服务器端以与客户端达成一致，则需要能够从该行获取标识符。

Assuming the html looks something like this from renderTable(), I added some uniqueness to the IDs and assumed that there may be more than one row in the table.假设 html 在 renderTable() 中看起来像这样，我为 ID 添加了一些唯一性，并假设表中可能有不止一行。

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td id="_id1">id</td>
          <td id="datetime1">datetime</td>
          <td id="state1">state</td>
          <td id="amount1">amount</td>
          <td id="actions1">
            <a href="#" class="item-action-btn">action1</a>
          </td>
        </tr>
        <tr>
          <td id="_id2">id</td>
          <td id="datetime2">datetime</td>
          <td id="state2">state</td>
          <td id="amount2">amount</td>
          <td id="actions2">
            <a href="#" class="item-action-btn">action2</a>
          </td>
        </tr>
        <tr>
          <td id="_id3">id</td>
          <td id="datetime3">datetime</td>
          <td id="state3">state</td>
          <td id="amount3">amount</td>
          <td id="actions3">
            <a href="#" class="item-action-btn">action3</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Below looks for any .item-action-btn click, logs its id to console (you could do other stuff with it), and then removes the row from the table.下面查找任何.item-action-btn单击，将其 id 记录到控制台（您可以用它做其他事情），然后从表中删除该行。

$(document).on('click', '.item-action-btn', function(e) {
  e.preventDefault();
  let tr = $(this).closest('tr');
  console.log(tr.children('td:first').attr('id'));
  // maybe send this ID to the server using ajax to update cart?
  // if you wanted the text out of that initial column use this:
  console.log(tr.children('td:first').text());
  tr.remove();
});

https://jsfiddle.net/mk9xep5r/ https://jsfiddle.net/mk9xep5r/

单击后如何删除特定行 | Javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-27 15:08:12

单击后如何删除特定行 | Javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-27 15:08:12

解决方案1
1 已采纳 2022-05-27 15:08:12