javascript 实现简单的table排序及table操作练习

当然，下面是一个使用JavaScript实现的简单表格排序及表格操作练习的例子。这个示例将包括HTML表格、CSS样式以及JavaScript代码，用于对表格进行排序。

### HTML部分

首先，我们创建一个简单的表格，包含一些数据用于排序。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Sorting</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th onclick="sortTable(0)">Name</th>
                <th onclick="sortTable(1)">Age</th>
                <th onclick="sortTable(2)">City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

### CSS部分 (styles.css)

这里我们简单设置一下表格的样式，使其更加易读。


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

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

th {
    cursor: pointer;
}

### JavaScript部分 (script.js)

现在，我们将添加JavaScript代码来实现表格的排序功能。


function sortTable(column) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("dataTable");
    switching = true;
    // 设置排序方向，每点击一次切换一次
    dir = "asc"; 
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[column];
            y = rows[i + 1].getElementsByTagName("TD")[column];
            if (dir == "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

在这个例子中，我们定义了一个`sortTable`函数，它接收一个参数`column`，代表要排序的列索引（从0开始）。通过点击表头``元素来触发这个函数，并传入相应的列索引。函数内部通过比较单元格的内容（这里简单地将内容转为小写后进行比较），实现升序或降序排序。每次点击表头时，会切换排序方向。