123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <!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>
|