CODEWITHSUNDEEP
javascripthtmljqueryangular
Nour
Nour

Reputation: 23

How to toggle table row based on custom id

I have a table in an HTML file used in an Angular application. I need to retrieve the user orders and list the orders in the table. if the user clicks on the Review button, I want the user to be able to see the related order items for this specific order. The review button should expand a new row containing the related order items. How to achieve this programmatically? I have tried passing the order id as the id of the row but unfortunately, this does not work.

<script type="text/javascript">
  function show_hide_row(row) {
    $("#" + row).toggle();
  }
</script>

<table class="table" cellpadding=10>
      <caption>The total amount of orders is {{orders.length}}</caption>
      <tbody *ngFor="let order of orders" >
          <td>
            <a class="link" style="font-weight: bold; cursor: pointer;" onclick="show_hide_row(order.orderId);">Review</a>
          </td>
        </tr>
        <tr id="{{order.orderId}}" class="hidden_row">
          <p>Here comes the related order items for the expanded order</p> 
        </tr>
      </tbody>
</table>

Any help would be much appreciated! Thanks.

Upvotes: 0

Views: 174

Answers (1)

Nour
Nour

Reputation: 23

I have solved this issue by following those steps:

1- I have created a JS file in the assets/js folder 2- I have added the above function to the JS file. 3- I have added the file to the angular.json file

"scripts": ["src/assets/js/common.js"]

4- run the command

ng serve

5- In the component module ts file I have declared a function that matches the name of the function in the JS file

declare function show_hide_row(row: any): any;

6- I have created a public function with the same name, this will be used in the HTML file to call the JS function

public show_hide_row(row: any): void {
    show_hide_row(row);
  }

7- I have tested the function by adding

function show_hide_row(row) {
    $("#" + row).toggle();
    **console.log(row);**
}

8- in the HTML file I am using Angular event binding:

(click)="this.show_hide_row(order.orderId)"

9- Testing it with the browser, it works and I am able to see the custom id of the row.

Upvotes: 1

Related Questions