TAG
CSS
JavaScript
Result
Run
License
<h2>Click to cell</h2> <table id="mytable" class="simplely"> <col /> <tbody> <tr> <td>Tom</td> <td>John</td> <td>Merry</td> <td>Melody</td> </tr> </tbody> </table>
.simplely { border-collapse: collapse; } .simplely col { background-color: yellow; } .simplely th, .simplely td { border: 1px solid gray; padding: 5px 10px; }
window.addEventListener("load", () => { const $elCol = document.querySelector("#mytable col"); const $nlElTd = document.querySelectorAll("#mytable td"); $nlElTd.forEach(elTd => { elTd.addEventListener("click", e => { let idx = e.currentTarget.cellIndex; $elCol.span = idx + 1; }); }); });
Console
expand_less
License
License
by DevDic
Close