|
|
@@ -0,0 +1,167 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>DOM: База</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<style>
|
|
|
+ table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .podsvetka {
|
|
|
+ background:lightgreen;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+ <script>
|
|
|
+
|
|
|
+//------таблица умножения
|
|
|
+ /*let table=document.createElement('table');
|
|
|
+ table.border=1+'px';
|
|
|
+ table.id='tab';
|
|
|
+ for(let j=0;j<=10;j++){
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+ if(j==0){
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ td.innerText=i;
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'%';
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ if(i==0){
|
|
|
+ td.innerText=j;
|
|
|
+ }else{
|
|
|
+ td.innerText=i*j;
|
|
|
+ }
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'p%';
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ table.append(tr);
|
|
|
+ }
|
|
|
+ document.body.append(table);*/
|
|
|
+
|
|
|
+
|
|
|
+//------подсветка ячейки
|
|
|
+ /*let table=document.createElement('table');
|
|
|
+ table.border=1+'px';
|
|
|
+ table.id='tab';
|
|
|
+ table.style.borderColor='orange';
|
|
|
+ for(let j=0;j<=10;j++){
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+ if(j==0){
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ td.innerText=i;
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'%';
|
|
|
+ tr.append(td);
|
|
|
+ td.onmouseover=function(){
|
|
|
+ this.style.backgroundColor='pink';
|
|
|
+ }
|
|
|
+ td.onmouseout=function(){
|
|
|
+ this.style.backgroundColor='yellow';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ if(i==0){
|
|
|
+ td.innerText=j;
|
|
|
+ }else{
|
|
|
+ td.innerText=i*j;
|
|
|
+ }
|
|
|
+ td.onmouseover=function(){
|
|
|
+ this.style.backgroundColor='pink';
|
|
|
+ }
|
|
|
+ td.onmouseout=function(){
|
|
|
+ this.style.backgroundColor='yellow';
|
|
|
+ }
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'p%';
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table.append(tr);
|
|
|
+ }
|
|
|
+ document.body.append(table);
|
|
|
+*/
|
|
|
+
|
|
|
+//------подсветить строку и столбец
|
|
|
+ let table=document.createElement('table');
|
|
|
+ table.border=1+'px';
|
|
|
+ table.id='tab';
|
|
|
+ table.style.borderColor='orange';
|
|
|
+ for(let j=0;j<=10;j++){
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+
|
|
|
+ if(j==0){
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ td.innerText=i;
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'%';
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(let i=0;i<=10;i++){
|
|
|
+ let td=document.createElement('td');
|
|
|
+ if(i==0){
|
|
|
+ td.innerText=j;
|
|
|
+ }else{
|
|
|
+ td.innerText=i*j;
|
|
|
+ }
|
|
|
+ td.align='center';
|
|
|
+ td.height=5+'%';
|
|
|
+ td.width=5+'p%';
|
|
|
+ tr.append(td);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table.append(tr);
|
|
|
+ }
|
|
|
+
|
|
|
+ table.onmouseover=function(event){
|
|
|
+ let target=event.target;
|
|
|
+ target.style.backgroundColor='yellow';
|
|
|
+ document.querySelectorAll(".podsvetka").forEach(
|
|
|
+ item => item.classList.remove("podsvetka")
|
|
|
+ );
|
|
|
+ target.closest("tr").classList.add("podsvetka");
|
|
|
+ target.closest("table").querySelectorAll("tr").forEach(
|
|
|
+ row => row.cells[target.cellIndex].classList.add("podsvetka")
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ table.onmouseout=function(event){
|
|
|
+ let target=event.target;
|
|
|
+ target.style.backgroundColor='';
|
|
|
+ document.querySelectorAll(".podsvetka").forEach(
|
|
|
+ item => item.classList.remove("podsvetka")
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ document.body.append(table);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
