TXT/CSV ビューワ�E�検索・ソート付き�E�E/title> <style> body { font-family: system-ui, sans-serif; margin: 16px; } input, button { margin: 4px; padding: 4px 8px; } table { border-collapse: collapse; width: 100%; margin-top: 12px; } th, td { border: 1px solid #ccc; padding: 4px 8px; } th { background: #f0f0f0; cursor: pointer; white-space: nowrap; } tr:nth-child(even) { background: #fafafa; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <h2>TXT/CSV ビューワ</h2> <div>  ファイル吁E <input type="text" id="fileName" value="05world26-name.txt" size="20"> <button id="loadBtn">読み込み</button> </div> <div> 検索�E�部刁E��致・全列対象�E�E <input type="text" id="searchInput" placeholder="キーワードを入劁E> </div> <p>ヘッダーをクリチE��するとソートできます（�E頁E降頁E��、E/p> <table id="dataTable"> <thead></thead> <tbody></tbody> </table> <script> (function() { const fileInput = document.getElementById('fileName'); const loadBtn = document.getElementById('loadBtn'); const searchInput = document.getElementById('searchInput'); const table = document.getElementById('dataTable'); const thead = table.querySelector('thead'); const tbody = table.querySelector('tbody'); let rawRows = []; let headers = []; let sortState = {}; loadBtn.addEventListener('click', () => { const fileName = fileInput.value.trim(); if (!fileName) { alert('ファイル名を入力してください、E); return; } fetch(fileName) .then(res => { if (!res.ok) throw new Error('読み込み失敁E ' + res.status); return res.text(); }) .then(text => { parseText(text); renderTable(); }) .catch(err => { console.error(err); alert('ファイルを読み込めませんでした、E); }); }); function parseText(text) { const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n') .split('\n').filter(l => l.trim() !== ''); if (lines.length === 0) { headers = []; rawRows = []; return; } const firstLine = lines[0]; const delimiter = firstLine.includes('\t') ? '\t' : ','; headers = firstLine.split(delimiter); rawRows = lines.slice(1).map(line => line.split(delimiter)); sortState = {}; } function renderTable() { thead.innerHTML = ''; const trHead = document.createElement('tr'); headers.forEach((h, idx) => { const th = document.createElement('th'); th.textContent = h; th.dataset.index = idx; th.addEventListener('click', () => sortByColumn(idx)); trHead.appendChild(th); }); thead.appendChild(trHead); const keyword = searchInput.value.trim().toLowerCase(); const filtered = rawRows.filter(row => !keyword || row.some(cell => (cell || '').toLowerCase().includes(keyword)) ); tbody.innerHTML = ''; filtered.forEach(row => { const tr = document.createElement('tr'); row.forEach((cell, idx) => { const td = document.createElement('td'); const headerName = headers[idx].toLowerCase(); if (['url', 'jpg', 'png'].includes(headerName)) { if (cell && cell.trim() !== '') { const a = document.createElement('a'); a.href = cell; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.textContent = cell; td.appendChild(a); } } else { td.textContent = cell; } tr.appendChild(td); }); tbody.appendChild(tr); }); } function sortByColumn(colIndex) { const current = sortState[colIndex] || 'none'; const next = current === 'asc' ? 'desc' : 'asc'; sortState = {}; sortState[colIndex] = next; rawRows.sort((a, b) => { const va = (a[colIndex] || '').toLowerCase(); const vb = (b[colIndex] || '').toLowerCase(); const na = parseFloat(va.replace(/[^\d.-]/g, '')); const nb = parseFloat(vb.replace(/[^\d.-]/g, '')); const numeric = !isNaN(na) && !isNaN(nb); let cmp; if (numeric) cmp = na - nb; else cmp = va < vb ? -1 : va > vb ? 1 : 0; return next === 'asc' ? cmp : -cmp; }); renderTable(); } searchInput.addEventListener('input', renderTable); })(); </script> </body> </html>