|
|
@@ -0,0 +1,61 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+
|
|
|
+ <title>Table2</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ function matrixTable() {
|
|
|
+ var table = [];
|
|
|
+ let tableInner = document.createElement("table")
|
|
|
+ tableInner.setAttribute("border", "2")
|
|
|
+
|
|
|
+ for(let i = 0; i < 10; i++) {
|
|
|
+ var newrow = document.createElement("tr");
|
|
|
+
|
|
|
+
|
|
|
+ table[i] = [];
|
|
|
+ for(let j = 0; j < 10; j++){
|
|
|
+ var newtd = document.createElement("td");
|
|
|
+ newtd.onmouseover = function(){
|
|
|
+ let coulum = document.getElementsByTagName("TD")
|
|
|
+
|
|
|
+ for (let key of coulum){
|
|
|
+ if (key.cellIndex == this.cellIndex){
|
|
|
+ key.style = "background-color: #c4c0c0; border: 2px solid black; "
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.parentElement.style = "background-color: #c4c0c0;"
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ newtd.onmouseout = function(){
|
|
|
+ this.parentElement.style = "background-color: none; border: 2px solid black"
|
|
|
+ let coulum = document.getElementsByTagName("TD")
|
|
|
+
|
|
|
+ for (let key of coulum){
|
|
|
+ if (key.cellIndex == this.cellIndex){
|
|
|
+ key.style = "background-color: none; border: 2px solid black; width: 15px; height: 15px;"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ newtd.style = "border: 2px solid black; width: 15px; height: 15px;"
|
|
|
+ newtd.innerHTML = ((i) * j)
|
|
|
+ let oneTd = newtd
|
|
|
+ newrow.appendChild(oneTd)
|
|
|
+ tableInner.appendChild(newrow)
|
|
|
+ }
|
|
|
+ document.body.appendChild(tableInner)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ matrixTable()</script>
|
|
|
+</body>
|
|
|
+</html>
|
