Interactive Data Sorting Tool JavaScript, HTML, CSS

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Data Sorting Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #data-entry {
            margin-bottom: 20px;
        }

        #data-list {
            margin-bottom: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            cursor: pointer;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>

    <h1>Interactive Data Sorting Tool</h1>

    <div id="data-entry">
        <label for="data-input">Enter data (comma-separated, e.g., Name,Age,City):</label>
        <input type="text" id="data-input" size="50">
        <button onclick="addData()">Add Data</button>
    </div>

    <div id="data-list">
        <h2>Data Table</h2>
        <table id="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data rows will be added here -->
            </tbody>
        </table>
    </div>

    <script>
        let data = []; // Array to store the data

        function addData() {
            const input = document.getElementById("data-input");
            const dataString = input.value.trim();

            if (dataString === "") {
                alert("Please enter data.");
                return;
            }

            const values = dataString.split(",").map(item => item.trim());

            if (values.length !== 3) {
                alert("Please enter data in the format: Name,Age,City");
                return;
            }

            data.push({ name: values[0], age: parseInt(values[1]), city: values[2] });  //Ensure age is a number

            renderTable();
            input.value = ""; // Clear the input field
        }


        function renderTable() {
            const tableBody = document.querySelector("#data-table tbody");
            tableBody.innerHTML = ""; // Clear the table

            data.forEach((item, index) => {
                const row = tableBody.insertRow();

                const nameCell = row.insertCell();
                nameCell.textContent = item.name;

                const ageCell = row.insertCell();
                ageCell.textContent = item.age;

                const cityCell = row.insertCell();
                cityCell.textContent = item.city;

                const actionsCell = row.insertCell();
                actionsCell.innerHTML = `<button onclick="deleteRow(${index})">Delete</button>`;
            });
        }


        function deleteRow(index) {
            data.splice(index, 1);
            renderTable();
        }


       function sortTable(columnIndex) {
            let property;

            switch (columnIndex) {
                case 0:
                    property = 'name';
                    break;
                case 1:
                    property = 'age';
                    break;
                case 2:
                    property = 'city';
                    break;
                default:
                    return;
            }

            data.sort((a, b) => {
                if (property === 'age') {
                    return a[property] - b[property]; //Sort numerically
                } else {
                    return a[property].localeCompare(b[property]); //Sort alphabetically
                }
            });

            renderTable();
        }


        // Add click listeners to table headers for sorting
        document.querySelectorAll("#data-table th").forEach((th, index) => {
            th.addEventListener("click", () => sortTable(index));
        });


        // Initial render (if you have default data)
        renderTable();

    </script>

</body>
</html>
```
👁️ Viewed: 12

Comments