昨日、不快指数一覧図表を作成した。
このテーブルの背景色は、JavaScriptを使って、HTML<TABLE>の<TD>に、セル内の数値に合わせて付けている。
jQueryを使う方法もあるが、jQueryを使わないでJavaScriptだけで非常に簡単にできる。「.rows」「.cells」が便利。
今回、セル内の数値に合わせて、<TD>にクラス名を付けている。
<style> .d70 { background: #FFFFA5; } .d75 { background: #FFD19E; } .d80 { background: #FF9E9E; } .d85 { background: #C09FE0; } </style> <script> let table = document.getElementById('fukaiShisuu'); for (let row of table.rows) { for(let cell of row.cells) { if (cell.tagName == "TD") { // TD 大文字でないと駄目 if (Number(cell.innerText) >= 85) { cell.classList.add("d85"); } else if (Number(cell.innerText) >= 80) { cell.classList.add("d80"); } else if (Number(cell.innerText) >= 75) { cell.classList.add("d75"); } else if (Number(cell.innerText) >= 70) { cell.classList.add("d70"); } } } } </script>
以下の例では、
<style> .d25 { background: #FFFF7F; } .d28 { background: #FFC07C; } .d31 { background: #FF6868; color: #fff; } .other { background: #AFFFFF; } </style> <script> let table = document.getElementById('data-table'); for (let row of table.rows) { for(let cell of row.cells){ if (cell.tagName == "TD" && cell.innerText != "" && cell.innerText.indexOf("/") === -1) { // TD 大文字でないと駄目 if (Number(cell.innerText) >= 31) { cell.classList.add("d31"); } else if (Number(cell.innerText) >= 28) { cell.classList.add("d28"); } else if (Number(cell.innerText) >= 25) { cell.classList.add("d25"); } else { cell.classList.add("other"); } } } } </script>