获取表行中的对象ID-javascript

时间:2020-05-12 13:52:57

标签: javascript html jquery

嘿,我正在尝试获取特定对象的ID,以便现在可以将其发送到后端。我很难一次获得单个对象而不是整个列表。

如果有什么时髦的地方,是因为我对此很陌生,并且已经尝试了很多次

我的JavaScript看起来像这样:

 //waits for the html doc to be ready before atempting to run any js.
$(document).ready( () =>{

    // jquery getting our json order data from API
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
          $clone.find('.customer_name').text(item.customer_name);
          $clone.find('.date').text(item.date);
          $clone.find('.time').text(item.time);
          $clone.find('.pickup').text(item.pickup);
          $clone.find('.comments').text(item.comments);
          $clone.find('.total').text(item.total + ' Kr.');

          let foo = function(){
            //gets id from object and sends it to backend using get method
          };

          // accept and cancel buttons
          $clone.find('.order_status').html(
            `<button id = "acceptOrder" type="button" onclick="${foo()}">Accept</button>` + 
            `<button id = "cancelOrder" type="button" onclick="${foo()})">Cancel</button>`
          );

          // loops through orders product name
          let productsName = item.products.map(prod => `${prod.name}`);
          $clone.find('.products').html(productsName.join('<br />'));

          // loops through orders product price
          let productsPrice = item.products.map(prod => `${prod.price} Kr.`);
          $clone.find('.price').html(productsPrice.join('<br />'));

          return $clone;
        });

        //appends to our frontpage html 
        $("#frontpage_new_ordertable tbody").append(rows);
    });
});

这是我从路线中获取的json数据。

{
id: "3JBBdJdBUP7QyDvCnmsF",
date: "30/04-2020",
time: "13:40:41",
total: 40,
products: [
{
name: "Caffe Latte",
price: 40
}
]
}

我的html看起来像这样:

 <!-- this is the table of new orders -->
      <table id="frontpage_new_ordertable">
        <tbody>
          <tr>
            <th>Customer</th>
            <th>Date</th>
            <th>Ordered at</th>
            <th>Wished pickup time</th>
            <th>Order</th>
            <th>Comments</th>
            <th>Price</th>
            <th>Total</th>
            <th>Order Status</th>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td class="customer_name"></td>
            <td class="date"></td>
            <td class="time"></td>
            <td class="pickup"></td>
            <td class="products"></td>
            <td class="comments"></td>
            <td class="price"></td>
            <td class="total"></td>
            <td class="order_status"></td>
          </tr>
        </tfoot>
      </table>

编辑后,它看起来像这样。我没有看到接受按钮

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
          $clone.data("id", item.id);
          $clone.find('.date').text(item.date);
          $clone.find('.time').text(item.time);
          $clone.find('.pickup').text(item.pickup);
          $clone.find('.comments').text(item.comments);
          $clone.find('.total').text(item.total + ' Kr.');


          $(function() {$(document).on("click", ".acceptOrder", foo);

            function foo() {
              var btn = $(this);
              var row = btn.closest("tr");
              var id = row.data("id");
              var name = row.find(".customer_name").text();  
            };

            $clone.find('.order_status').html(
              `<button type="button" class='acceptOrder">Accept</button>`
            );
        });

1 个答案:

答案 0 :(得分:1)

代码的相关部分是:

$(function() {
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

          let foo = function(){
            //gets id from object and sends it to backend using get method
          };

          $clone.find('.order_status').html(
            `<button id="acceptOrder" type="button" onclick="${foo()}">Accept</button>`
          );

          return $clone;
        });

        //appends to our frontpage html 
        $("#frontpage_new_ordertable tbody").append(rows);
    });
});

第一步是删除重复的ID:和onclick =

$(function() {
    $(document).on("click", ".acceptOrder", foo);

    function foo() {
    }

    ...
          $clone.find('.order_status').html(
            `<button type="button" class='acceptOrder">Accept</button>`
          );
    ...
});

现在,单击“接受”按钮将调用“ foo”作为事件,并以this作为按钮。您可以将原始JSON ID放在按钮上作为数据ID或放在父tr上:

    let rows = data.map(item => {
      let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
      $clone.data("id", item.id);

然后,在foo中,您可以将其获取为:

function foo() {
    var btn = $(this);
    var row = btn.closest("tr");
    var id = row.data("id");
    var name = row.find(".customer_name").text();
    ...
}

另一种选择是以相同的方式添加到按钮-我倾向于在tr上使用它,因为无论如何您可能都需要获取tr,这意味着它可以从任何地方使用元素(例如另一个按钮)。

`<button type="button" data-id="${item.id}" ...

包括更多上下文:

$(document).ready(() =>{

    // add event listener here
    $(document).on("click", ".acceptOrder", foo);

    // add the event handler at the top-level inside doc.ready

    function foo() {
      var btn = $(this);
      var row = btn.closest("tr");
      var id = row.data("id");
      var name = row.find(".customer_name").text();
      ...
    }

    // original code
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

          // add ID to the row as a data-id
          $clone.data("id", item.id);

          // original code
          $clone.find('.customer_name').text(item.customer_name);
          ...etc

          // remove let foo =
          // let foo = function(){

          // update accept/cancel buttons

          // accept and cancel buttons
          $clone.find('.order_status').html(
            `<button class="acceptOrder" type="button">Accept</button>` + 
            `<button class="cancelOrder" type="button">Cancel</button>`
          );