Function To Render the Data in Table Structure Using HTML

The function in the javascript is used to display the sales order items in a table structure.

<script>

      let removedItems = [];

      let addedItems = [];

      let deleteSOPersmissionFlag = “${deleteSOPersmission}”;

      document.addEventListener(“DOMContentLoaded”, function () {

        let scanButton = document.getElementById(“scanItemBtn”);

        let fetchButton = document.getElementById(“fetchItemBtn”);

        let saveButton = document.getElementById(“savebutton”);

        let deleteBtn = document.getElementById(“deleteOrderBtn”);

        const cancelOrder = document.getElementById(“cancelBtn”);

        if (deleteSOPersmissionFlag === “true”) {

          deleteBtn.style.display = “block”;

        }

        var salesOrderId = new URLSearchParams(window.location.search).get(“salesOrderId”);

        document.getElementById(“salesOrderId”).textContent = salesOrderId;

        let salesOrderItems = JSON.parse(‘${salesOrderJson}’);

        /* function to display the sales order items */

        function renderOrderItems() {

          try {

            let tableBody = document.getElementById(“orderItems”);

            tableBody.innerHTML = “”;

            salesOrderItems.forEach((item, index) => {

              let isFlagshipItem = item.flagShipItem;

              let row = document.createElement(“tr”);

              row.setAttribute(“data-index”, index);

              row.innerHTML =

                “<td class=’item-name’>” + item.itemName + “</td>” +

                “<td class=’item-qty’><input type=’number’ value='” + item.itemQuantity + “‘ min=’1’ ” + (isFlagshipItem ? “disabled” : “disabled”) + “></td>” +

                “<td class=’item-rate’>” + item.itemRate + “</td>” +

                “<td>” + item.taxgroup + “</td>” +

                “<td class=’tax-rate’>” + getTaxRate(item.taxgroup) + “</td>” +

                “<td class=’item-total’>” + item.itemAmount + “</td>” +

                “<td class=’line-unique-key’ style=’display: none;’>” + item.lineUniqueKey + “</td>” +

                “<td><button class=’remove-btn’>Remove</button></td>”;

              tableBody.appendChild(row);

            });

            updateOrderTotal(); // Ensure total updates after re-rendering

          } catch (error) {

            console.error(“Error in renderOrderItems:”, error);

          }

        }

</script>