hw10_16_DOM highlight cross.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <head>DOM cross</head>
  2. <body>
  3. <script>
  4. let table = document.createElement("table");
  5. for (let i = 1; i <= 9; i++) {
  6. let row = document.createElement("tr");
  7. table.append(row);
  8. for (let j = 1; j <= 9; j++) {
  9. let column = document.createElement("td");
  10. column.innerText = i * j;
  11. row.append(column);
  12. column.onmouseover = function () {
  13. for (let k = 0; k < 9; k++) {
  14. table.rows[i - 1].cells[k].style.backgroundColor = "lightgrey";
  15. }
  16. for (let k = 0; k < 9; k++) {
  17. table.rows[k].cells[j - 1].style.backgroundColor = "lightgrey";
  18. }
  19. column.style.backgroundColor = "grey";
  20. }
  21. column.onmouseout = function() {
  22. for (let k = 0; k < 9; k++) {
  23. table.rows[i - 1].cells[k].style.backgroundColor = "white";
  24. }
  25. for (let k = 0; k < 9; k++) {
  26. table.rows[k].cells[j - 1].style.backgroundColor = "white";
  27. }
  28. column.style.backgroundColor = "white";
  29. }
  30. }
  31. }
  32. document.body.append(table);
  33. </script>
  34. </body>