ทีนี้หลังจากลอง HTML: สลับตารางแนวนอนและตารางแนวตั้ง มาแล้วเราจะเพิ่มเงื่อนไข Static Columns (คอลัมน์คงที่ที่มีในทุกแถว) เข้าไปเพื่อให้สามารถใช้แปลงตารางใน database แนวนอนและตารางแนวตั้ง ได้จริง ๆ โดยจะมี static columns เช่น id, program_id อยู่ในทุก ๆ row ด้วย
table_Matrix_ reshaping_static_columns.html
<!DOCTYPE html>
<html lang="th">
<head> <meta charset="UTF-8"> <title>Database Matrix Reshaper - Simplified Flow</title> <style> body { font-family: 'Chakra Petch', sans-serif; padding: 20px; background-color: #f4f7f6; } .container { max-width: 1200px; margin: auto; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba (0,0,0,0.1) ; } .panel { background: #2c3e50; color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; } .input-group { display: flex; flex-direction: column; gap: 5px; } input { padding: 8px; border-radius: 4px; border: 1px solid #ddd; } button { padding: 12px 25px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } button:disabled { background: #6c757d; cursor: not-allowed; } table { border-collapse: collapse; width: 100%; margin-top: 15px; font-size: 12px; } th { background: #ecf0f1; padding: 10px; border: 1px solid #bdc3c7; color: #2c3e50; } td { border: 1px solid #dee2e6; padding: 8px; text-align: center; background: white; } .static-col { background: #f8f9fa !important; font-weight: bold; color: #2980b9; } .active-src { background-color: #ffc107 !important; } .done-tar { background-color: #2ecc71 !important; color: white; } .status { margin: 15px 0; font-weight: bold; color: #3498db; } .scroll-box { overflow-x: auto; max-height: 350px; border: 1px solid #ddd; margin-top: 10px; } .check-text { color: #2ecc71; font-size: 13px; margin-top: 5px; } </style>
</head>
<body> <div class="container"> <h2>Database Matrix Reshaper (Auto-Source Mode) </h2> <div class="panel"> <div class="input-group"> <label>1. Static Columns</label> <input type="text" id="staticCols" value="id, program_id" oninput="initSystem () "> </div> <div class="input-group"> <label>2. Source Matrix (R x P_Cols) </label> <div style="display:flex; gap:5px;"> <input type="number" id="sRow" value="3" style="width: 60px;" oninput="initSystem () "> x <input type="number" id="sCol" value="24" style="width: 60px;" oninput="initSystem () "> </div> </div> <div class="input-group"> <label>3. Target Reshape (Rows x New_Cols) </label> <div style="display:flex; gap:5px;"> <input type="number" id="tRow" value="72" style="width: 60px;" oninput="validateDimensions () "> x <input type="number" id="tCol" value="1" style="width: 60px;" oninput="validateDimensions () "> </div> <div id="dimCheck" class="check-text">✓ มิติถูกต้อง</div> </div> <button id="execBtn" onclick="runReshape () ">Execute Reshape</button> </div> <h4>Source Table (Raw Data) :</h4> <div class="scroll-box"> <table id="sourceTable"></table> </div> <div id="status" class="status">สถานะ: ระบบพร้อมประมวลผล</div> <h4>Target Table (Database Format) :</h4> <div class="scroll-box"> <table id="targetTable"></table> </div>
</div> <script> let sourceData = []; const sleep = (ms) => new Promise (res => setTimeout (res, ms)) ; // ฟังก์ชันเริ่มต้นระบบอัตโนมัติ (แทนที่ปุ่ม Source Table) function initSystem () { const rows = parseInt (document.getElementById ('sRow') .value) || 0; const cols = parseInt (document.getElementById ('sCol') .value) || 0; const staticNames = document.getElementById ('staticCols') .value.split (',') .map (s => s.trim ()) .filter (s => s) ; const table = document.getElementById ('sourceTable') ; sourceData = []; let html = "<thead><tr>"; staticNames.forEach (name => html += `<th class="static-col">${name}</th>`) ; for (let i=1; i<=cols; i++) html += `<th>Permission_${i}</th>`; html += "</tr></thead><tbody>"; for (let i=0; i<rows; i++) { let rowObj = { static: {}, perms: [] }; html += "<tr>"; staticNames.forEach (name => { const val = `${name}_${i+1}`; html += `<td class="static-col">${val}</td>`; rowObj.static[name] = val; }) ; for (let j=1; j<=cols; j++) { const pVal = `P_${i+1}_${j}`; const pId = `s-${i}-${j-1}`; html += `<td id="${pId}">${pVal}</td>`; rowObj.perms.push ({ val: pVal, id: pId }) ; } html += "</tr>"; sourceData.push (rowObj) ; } table.innerHTML = html + "</tbody>"; validateDimensions () ; } // ฟังก์ชันตรวจสอบความถูกต้องของมิติ Target function validateDimensions () { const sTotal = (parseInt (document.getElementById ('sRow') .value) || 0) * (parseInt (document.getElementById ('sCol') .value) || 0) ; const tR = parseInt (document.getElementById ('tRow') .value) || 0; const tC = parseInt (document.getElementById ('tCol') .value) || 0; const check = document.getElementById ('dimCheck') ; const btn = document.getElementById ('execBtn') ; if (tR * tC === sTotal && sTotal > 0) { check.textContent = "✓ มิติถูกต้อง"; check.style.color = "#2ecc71"; btn.disabled = false; } else { check.textContent = `✗ ไม่ลงตัว (ต้องการ ${sTotal} ช่อง) `; check.style.color = "#e74c3c"; btn.disabled = true; } } // ฟังก์ชันหลักในการ Reshape async function runReshape () { const tRows = parseInt (document.getElementById ('tRow') .value) ; const tCols = parseInt (document.getElementById ('tCol') .value) ; const staticNames = document.getElementById ('staticCols') .value.split (',') .map (s => s.trim ()) .filter (s => s) ; const targetTable = document.getElementById ('targetTable') ; const status = document.getElementById ('status') ; // รีเซ็ตการแสดงผล initSystem () ; let flatItems = []; sourceData.forEach (row => { row.perms.forEach (p => flatItems.push ({ pVal: p.val, sId: p.id, static: row.static })) ; }) ; let html = "<thead><tr>"; staticNames.forEach (name => html += `<th>${name}</th>`) ; for (let i=1; i<=tCols; i++) html += `<th>New_Perm_${i}</th>`; html += "</tr></thead><tbody>"; for (let r=0; r<tRows; r++) { html += `<tr id="tr-${r}">`; staticNames.forEach ( () => html += `<td class="static-col">...</td>`) ; for (let c=0; c<tCols; c++) html += `<td id="t-${r}-${c}"></td>`; html += "</tr>"; } targetTable.innerHTML = html + "</tbody>"; let k = 0; for (let r=0; r<tRows; r++) { if (k >= flatItems.length) break; // ดึงค่า Static จากจุดกำเนิดข้อมูลชิ้นแรกในแถวเป้าหมาย const firstInRow = flatItems[k]; const rowCells = document.getElementById (`tr-${r}`) .cells; staticNames.forEach ( (name, idx) => { rowCells[idx].textContent = firstInRow.static[name]; }) ; for (let c=0; c<tCols; c++) { if (k >= flatItems.length) break; const item = flatItems[k]; status.textContent = `กำลังย้าย: ${item.pVal} (ลำดับที่ ${k+1}) `; const sCell = document.getElementById (item.sId) ; const tCell = document.getElementById (`t-${r}-${c}`) ; sCell.classList.add ('active-src') ; await sleep (30) ; // แสดงผลรวดเร็ว tCell.textContent = item.pVal; tCell.classList.add ('done-tar') ; sCell.classList.remove ('active-src') ; sCell.style.opacity = "0.3"; k++; } } status.textContent = "✅ Execute Reshape สำเร็จ: ข้อมูลสัมพันธ์กับ ID ต้นทางถูกต้อง"; } // รันระบบครั้งแรกทันที window.onload = initSystem;
</script> </body>
</html>
Data Persistence: การดึงค่า id และ program_id ยังคงความแม่นยำโดยอ้างอิงจากแถวต้นฉบับของข้อมูล Permission นั้น ๆ เสมอ
อ่านเพิ่มเติม