title: How do I add enitre row of data of an table in an array of objects?
body: <p>I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.</p>
  <p><strong>index.html file</strong></p>
  <pre><code>
  &lt;table class=&quot;table&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope=&quot;col&quot;&gt;User Name&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Order No&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Order Date&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Status&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Total Amount&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Total Qty&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Total Products&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;View/Edit&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
         
      &lt;tr&gt;
         &lt;td id=&quot;user-name&quot;&gt;Alice&lt;/td&gt;
          &lt;td id=&quot;order-no&quot;&gt;8536&lt;/td&gt;
          &lt;td id=&quot;order-date&quot;&gt;13/07/2020&lt;/td&gt;
          &lt;td id=&quot;status&quot; &gt;Pending&lt;/td&gt;
          &lt;td id=&quot;total-amount&quot; &gt;1800&lt;/td&gt;
          &lt;td id=&quot;total-qty&quot; &gt;3&lt;/td&gt;
          &lt;td id=&quot;total-products&quot; &gt;3&lt;/td&gt;
          &lt;td&gt;
          &lt;a id=&quot;view-data&quot; href=&quot;#&quot; class=&quot;text-success stretched-link&quot;&gt;View/Edit&lt;/a&gt;
              &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
         &lt;td id=&quot;user-name&quot;&gt;Michael&lt;/td&gt;
          &lt;td id=&quot;order-no&quot;&gt;4354&lt;/td&gt;
          &lt;td id=&quot;order-date&quot;&gt;12/07/2020&lt;/td&gt;
          &lt;td id=&quot;status&quot; &gt;Approved&lt;/td&gt;
          &lt;td id=&quot;total-amount&quot; &gt;1500&lt;/td&gt;
          &lt;td id=&quot;total-qty&quot; &gt;2&lt;/td&gt;
          &lt;td id=&quot;total-products&quot; &gt;2&lt;/td&gt;
          &lt;td&gt;
          &lt;a id=&quot;view-data&quot; href=&quot;#&quot; class=&quot;text-success stretched-link&quot;&gt;View/Edit&lt;/a&gt;
              &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>app.js file</strong></p>
  <pre><code>let usersData = []; // array to store user table objects
  
  $('#view-data').click(function(){
    var row  = $(this).closest(&quot;tr&quot;);
     
    // userData object to store data from a table complete row
    var userData = {
          &quot;order_no&quot;: row.find('#order-no').text(),
          &quot;order_date&quot;: row.find('#order-date').text(),
          &quot;totalproducts&quot;: row.find('#total-products').text(),
          &quot;total_amount&quot;: row.find('#total-amount').text(),
          &quot;total_qty&quot;: row.find('#total-qty').text(),
          &quot;status&quot;: row.find('#status').text(),
          &quot;user_name&quot;: row.find('#user-name').text(),
    }
    usersData.push(userData)
    console.log(usersData)
  })
  </code></pre>
  <p>Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.</p>