Блог

Я пытаюсь добавлять данные всей строки таблицы в мой массив объектов всякий раз, когда кто-то нажимает на привязочный тег с именем view / edit . Я написал некоторую логику, но, думаю, я что-то упускаю.

index.html файл

 
<table class="table">
  <thead>
    <tr>
      <th scope="col">User Name</th>
        <th scope="col">Order No</th>
        <th scope="col">Order Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total Amount</th>
        <th scope="col">Total Qty</th>
        <th scope="col">Total Products</th>
        <th scope="col">View/Edit</th>
    </tr>
  </thead>
  <tbody>
       
    <tr>
       <td id="user-name">Alice</td>
        <td id="order-no">8536</td>
        <td id="order-date">13/07/2020</td>
        <td id="status" >Pending</td>
        <td id="total-amount" >1800</td>
        <td id="total-qty" >3</td>
        <td id="total-products" >3</td>
        <td>
        <a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
            </td>
    </tr>
    
    <tr>
       <td id="user-name">Michael</td>
        <td id="order-no">4354</td>
        <td id="order-date">12/07/2020</td>
        <td id="status" >Approved</td>
        <td id="total-amount" >1500</td>
        <td id="total-qty" >2</td>
        <td id="total-products" >2</td>
        <td>
        <a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
            </td>
    </tr>
  </tbody>
</table>
 

app.js файл

 let usersData = []; // array to store user table objects

$('#view-data').click(function(){
  var row  = $(this).closest("tr");
   
  // userData object to store data from a table complete row
  var userData = {
        "order_no": row.find('#order-no').text(),
        "order_date": row.find('#order-date').text(),
        "totalproducts": row.find('#total-products').text(),
        "total_amount": row.find('#total-amount').text(),
        "total_qty": row.find('#total-qty').text(),
        "status": row.find('#status').text(),
        "user_name": row.find('#user-name').text(),
  }
  usersData.push(userData)
  console.log(usersData)
})
 

Примечание: я должен использовать button вместо тега, но я использую привязочный тег, потому что в будущем он откроет другую вкладку для тех же манипуляций с данными.

Селектор необходимо изменить на class (view-data) вместо id

 let usersData = []; // array to store user table objects

$('.view-data').click(function(ev){  
          ev.preventDefault();
          ev.stopPropagation();
  var row  = $(ev.currentTarget).closest("tr");
   
  // userData object to store data from a table complete row
  var userData = {
        "order_no": row.find('#order-no').text(),
        "order_date": row.find('#order-date').text(),
        "totalproducts": row.find('#total-products').text(),
        "total_amount": row.find('#total-amount').text(),
        "total_qty": row.find('#total-qty').text(),
        "status": row.find('#status').text(),
        "user_name": row.find('#user-name').text(),
  }
  usersData.push(userData)
  console.log(userData)
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">User Name</th>
        <th scope="col">Order No</th>
        <th scope="col">Order Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total Amount</th>
        <th scope="col">Total Qty</th>
        <th scope="col">Total Products</th>
        <th scope="col">View/Edit</th>
    </tr>
  </thead>
  <tbody>
       
    <tr>
       <td id="user-name">Alice</td>
        <td id="order-no">8536</td>
        <td id="order-date">13/07/2020</td>
        <td id="status" >Pending</td>
        <td id="total-amount" >1800</td>
        <td id="total-qty" >3</td>
        <td id="total-products" >3</td>
        <td>
        <a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
            </td>
    </tr>
    
    <tr>
       <td id="user-name">Michael</td>
        <td id="order-no">4354</td>
        <td id="order-date">12/07/2020</td>
        <td id="status" >Approved</td>
        <td id="total-amount" >1500</td>
        <td id="total-qty" >2</td>
        <td id="total-products" >2</td>
        <td>
        <a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
            </td>
    </tr>
  </tbody>
</table>