SorCSVData/sorreadcsv.html at main · WeiMingYu/SorCSVData · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>CSV檔案讀取與排序</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
            text-align: left;
        }
        th {
            cursor: pointer;
        }
        /* 為偶數行設定背景顏色 */
        tr:nth-child(even) {
        background-color: #f2f2f2; /* 淺灰色 */
        }

/* 為奇數行設定背景顏色 */
         tr:nth-child(odd) {
        background-color: #ffffff; /* 白色 */
         }
    </style>
</head>
<body>

<input type="file" id="csvFileInput" accept=".csv" onchange="loadCSVFile(event)">
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="搜尋...">
<br><br>
<table id="data-table">
    <thead>
        <tr>
            <th onclick="sortTable(0)">測試品</th>
            <th onclick="sortTable(1)">壓力</th>
            <th onclick="sortTable(2)">工作狀態</th>
            <th onclick="sortTable(3)">日期時間</th>
            <th onclick="sortTable(4)">工作次數</th>
            <th onclick="sortTable(5)">保壓次數</th>
            <!-- 根據您的CSV文件結構添加更多欄位 -->
        </tr>
    </thead>
    <tbody>
        <!-- CSV資料將被載入這裡 -->
    </tbody>
</table>


<script>
// ...之前的loadCSVFile和searchTable函數...
function loadCSVFile(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
        var text = reader.result;
        var data = text.split(/\r\n|\n/);
        var fragment = new DocumentFragment();

        // 解析CSV資料並添加到 DocumentFragment 中
        data.forEach(function(rowData) {
            var row = document.createElement('tr');
            rowData.split(',').forEach(function(cellData) {
                var cell = document.createElement('td');
                cell.textContent = cellData;
                row.appendChild(cell);
            });
            fragment.appendChild(row);
        });

        // 一次性更新 DOM
        var table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
        table.innerHTML = "";
        table.appendChild(fragment);
    };
    reader.readAsText(input.files[0]);
}

function searchTable() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("data-table");
    tr = table.getElementsByTagName("tr");

    // 循環表格每一行，查找匹配項 0中文標題  1英文標題從資料開查詢
    for (i = 2; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (var j = 0; j < td.length; j++) {
            if (td[j]) {
                txtValue = td[j].textContent || td[j].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    break;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
}

var sortDirections = {};
function sortTable(column) {
    // 如果 sortDirections[column] 未定義，則初始化為 true
    if (sortDirections[column] === undefined) {
        sortDirections[column] = true;
    } else {
        // 切換排序方向
        sortDirections[column] = !sortDirections[column];
    }

    var table = document.getElementById("data-table");
    var tbody = table.tBodies[0];
    var rows = Array.from(tbody.rows).slice(1);
    // 定義比較函數
    rows.sort(function(rowA, rowB) {
        // 確保每一行都有足夠的單元格
        var cellA = rowA.cells[column] || {};
        var cellB = rowB.cells[column] || {};
        var textA = (cellA.textContent || '').trim().toLowerCase();
        var textB = (cellB.textContent || '').trim().toLowerCase();

        // 根據排序方向進行比較
        if (sortDirections[column]) { // 如果為 true，則升序
            return textA.localeCompare(textB);
        } else { // 否則，降序
            return textB.localeCompare(textA);
        }
    });
    // 使用 DocumentFragment 來更新 DOM
    var fragment = document.createDocumentFragment();
    fragment.appendChild(tbody.rows[0]);
    rows.forEach(function(row) {
        fragment.appendChild(row);
    });
    tbody.appendChild(fragment);
}


</script>

</body>
</html>