Site icon PlusMagi's Blog By Pitt Phunsanit

HTML: สลับตารางแนวนอนและตารางแนวตั้ง

phunsanit

หลังจากได้ทั้งทฤษฎี เอา Matrix มาสลับ column ใน database แนวนอนแนวตั้ง และ flowchart UML: สลับตารางแนวนอนและตารางแนวตั้ง ก็ได้เวลาที่จะเขียน code ว่ามันทำงานถูกต้องมั๋ย กันจริง ๆ ทั้งเปลี่ยนตารางเป็นแนวนอนแนวตั้ง โดยใช้ base ที่ web programmer ทุกคนน่าจะคุ้นคือ HTML, JavaScript, CSS
table_Matrix_ reshaping.html

<!DOCTYPE html>
<html lang="th">
<head> <meta charset="UTF-8"> <title>Dynamic Matrix Reshaper</title> <style> body { font-family: 'Chakra Petch', sans-serif; padding: 20px; background-color: #f0f2f5; } .container { max-width: 1000px; margin: auto; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba (0,0,0,0.1) ; } .config-panel { display: flex; gap: 20px; margin-bottom: 20px; padding: 20px; background: #e9ecef; border-radius: 10px; flex-wrap: wrap; } .box { border: 1px solid #dee2e6; padding: 15px; border-radius: 8px; flex: 1; min-width: 250px; } table { border-collapse: collapse; width: 100%; table-layout: fixed; margin-top: 10px; } td { border: 1px solid #adb5bd; padding: 8px; text-align: center; font-size: 13px; height: 35px; background: white; transition: 0.3s; } .active-src { background-color: #ffd600 !important; font-weight: bold; transform: scale (1.05) ; z-index: 10; } .active-tar { background-color: #007bff !important; color: white; } .done-tar { background-color: #28a745 !important; color: white; } .moved { opacity: 0.3; background: #e9ecef; } input { width: 50px; padding: 5px; text-align: center; border-radius: 4px; border: 1px solid #ced4da; } button { padding: 10px 20px; background: #212529; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } button:disabled { background: #6c757d; } .total-badge { background: #007bff; color: white; padding: 2px 8px; border-radius: 10px; } </style>
</head>
<body> <div class="container"> <h2>Matrix Reshaping Simulator</h2> <div class="config-panel"> <div class="box"> <strong>1. Source Matrix (ต้นทาง) </strong><br><br> Rows: <input type="number" id="sRow" value="3" oninput="updateTotal () "> x Cols: <input type="number" id="sCol" value="8" oninput="updateTotal () "><br> Total Cells: <span id="totalBadge" class="total-badge">24</span> </div> <div class="box"> <strong>2. Target Matrix (ปลายทาง) </strong><br><br> Rows: <input type="number" id="tRow" value="6" oninput="autoCalc ('row') "> x Cols: <input type="number" id="tCol" value="4" oninput="autoCalc ('col') "><br> <small id="warn" style="color: green;">✓ มิติถูกต้อง</small> </div> <div style="display: flex; align-items: center;"> <button id="startBtn" onclick="runSimulation () ">เริ่มการย้ายข้อมูล</button> </div> </div> <div id="status" style="margin-bottom: 15px; font-weight: bold; color: #495057;">สถานะ: พร้อมใช้งาน</div> <h4>Source Table:</h4> <table id="sourceTable"></table> <h4>Target Table:</h4> <table id="targetTable"></table>
</div> <script> let totalCells = 24; function updateTotal () { const r = parseInt (document.getElementById ('sRow') .value) || 1; const c = parseInt (document.getElementById ('sCol') .value) || 1; totalCells = r * c; document.getElementById ('totalBadge') .textContent = totalCells; autoCalc ('row') ; // ปรับ target ตาม total ใหม่ renderSource (r, c) ; } function autoCalc (type) { const tRow = document.getElementById ('tRow') ; const tCol = document.getElementById ('tCol') ; const warn = document.getElementById ('warn') ; const btn = document.getElementById ('startBtn') ; let r = parseInt (tRow.value) || 1; let c = parseInt (tCol.value) || 1; if (type === 'row') { c = Math.floor (totalCells / r) ; tCol.value = c; } else { r = Math.floor (totalCells / c) ; tRow.value = r; } if (r * c === totalCells) { warn.textContent = "✓ มิติถูกต้อง"; warn.style.color = "green"; btn.disabled = false; } else { warn.textContent = `✗ ไม่ลงตัว (ขาด/เกิน ${Math.abs (totalCells - (r*c)) } ช่อง) `; warn.style.color = "red"; btn.disabled = true; } } function renderSource (r, c) { const table = document.getElementById ('sourceTable') ; table.innerHTML = ""; let count = 1; for (let i = 0; i < r; i++) { let row = table.insertRow () ; for (let j = 0; j < c; j++) { let cell = row.insertCell () ; cell.id = `s-${count-1}`; cell.textContent = "C" + count; count++; } } } const sleep = (ms) => new Promise (res => setTimeout (res, ms)) ; async function runSimulation () { const btn = document.getElementById ('startBtn') ; const status = document.getElementById ('status') ; const tR = parseInt (document.getElementById ('tRow') .value) ; const tC = parseInt (document.getElementById ('tCol') .value) ; const targetTable = document.getElementById ('targetTable') ; btn.disabled = true; targetTable.innerHTML = ""; renderSource (parseInt (document.getElementById ('sRow') .value) , parseInt (document.getElementById ('sCol') .value)) ; // สร้างตารางเป้าหมายเปล่า for (let i = 0; i < tR; i++) { let row = targetTable.insertRow () ; for (let j = 0; j < tC; j++) { let cell = row.insertCell () ; cell.id = `t-${i}-${j}`; } } let k = 0; // ลำดับการทำงานตาม Flowchart: วนลูปตามโครงสร้างใหม่ for (let r = 0; r < tR; r++) { for (let c = 0; c < tC; c++) { if (k >= totalCells) break; status.innerHTML = `ขั้นตอน: หยิบ C${k+1} ไปวางที่ [แถว ${r+1}, คอลัมน์ ${c+1}]`; const sCell = document.getElementById (`s-${k}`) ; const tCell = document.getElementById (`t-${r}-${c}`) ; sCell.classList.add ('active-src') ; tCell.classList.add ('active-tar') ; await sleep (1000) ; // หน่วงเวลา 1 วินาทีตามที่ขอ tCell.textContent = sCell.textContent; tCell.classList.replace ('active-tar', 'done-tar') ; sCell.classList.remove ('active-src') ; sCell.classList.add ('moved') ; k++; } } status.innerHTML = "🏁 เสร็จสิ้นการ Reshape ข้อมูลทั้งหมด!"; btn.disabled = false; } // Initial render updateTotal () ;
</script> </body>
</html>

มี Animation เล็ก ๆ ช้า ๆ ให้เห็นการทำงานด้วย ถ้าสมัยเรียนมีสื่อการสอนแบบนี้ คงจะดีไม่น้อย ไม่มองข้ามว่า เรียนเรียนคณิตศาสตร์เรื่องนี้ไปทำไม

อ่านเพิ่มเติม

Exit mobile version