table1.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Table1</title>
  7. </head>
  8. <body>
  9. <script>
  10. function matrixTable() {
  11. var table = [];
  12. let tableInner = document.createElement("table")
  13. tableInner.setAttribute("border", "2")
  14. for(let i = 0; i < 10; i++) {
  15. var newrow = document.createElement("tr");
  16. table[i] = [];
  17. for(let j = 0; j < 10; j++){
  18. var newtd = document.createElement("td");
  19. newtd.onmouseover = function(){
  20. this.style = "background-color: #c4c0c0;"
  21. }
  22. newtd.onmouseout = function(){
  23. this.style = "background-color: none; border: 2px solid black; width: 15px; height: 15px;"
  24. }
  25. newtd.style = "border: 2px solid black; width: 15px; height: 15px;"
  26. newtd.innerHTML = ((i) * j)
  27. let oneTd = newtd
  28. newrow.appendChild(oneTd)
  29. tableInner.appendChild(newrow)
  30. }
  31. document.body.appendChild(tableInner)
  32. }
  33. }
  34. matrixTable()</script>
  35. </body>
  36. </html>