index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chemical Supplies</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>   <!-- Will load after the html  -->
</head>

<body>
    <h1>Chemical Supplies</h1>

    <div class="tableContainer">
        <div class="icon-container">
            <span class="icon" onclick="addRow()">Add</span>
            <span class="icon" onclick="editRow()">Edit</span>
            <span class="icon" onclick="changeRowPosition('down')">Down</span>
            <span class="icon" onclick="changeRowPosition('up')">Up</span>
            <span class="icon" onclick="deleteRows()">Delete</span>
            <span class="icon" onclick="refreshData()">Refresh</span>
            <span class="icon" onClick="saveData()">Save</span>
        </div>
        <table>
            <thead class="tableHeading">
                <th>S No.</th>
                <th onclick="changeOrder(event)" key="chemical_name">
                    <div class="thStyle1">
                        <span>Chemical Name</span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="vendor">
                    <div class="thStyle1">
                        <span>Vendor</span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="density">
                    <div class="thStyle1">
                        <span>
                            <div>Density</div>
                            <div style="color: rgba(128, 128, 128, 0.516);font-weight: 300;">g/m&sup3;</div>
                        </span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="viscosity">
                    <div class="thStyle1">
                        <span>
                            <div>Viscosity</div>
                            <div style="color: rgba(128, 128, 128, 0.516);font-weight: 300;">m&sup2;/s</div>
                        </span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="packaging">
                    <div class="thStyle1">
                        <span>Packaging</span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="pack_size">
                    <div class="thStyle1">
                        <span>Pack size</span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="unit">
                    <div class="thStyle1">
                        <span>Unit</span>
                        <span class="arrow"></span>
                    </div>
                </th>
                <th onclick="changeOrder(event)" key="quantity">
                    <div class="thStyle1">
                        <span>Quantity</span>
                        <span class="arrow"></span>
                    </div>
                </th>
            </thead>
            <tbody id="tableContent">
            </tbody>
        </table>
    </div>
</body>

</html>