Форум

javascript888 · #1 (**permalink**) 21.06.2021, 11:13

Как Сделайте кнопку, по нажатию на которую в красный фон покрасится та ячейка, номер которой совпадает с номером из переменных.
Дана следующая HTML таблица:
<table id="table"> <tr> <td data-row="1" data-col="1"></td> <td data-row="1" data-col="2"></td> <td data-row="1" data-col="3"></td> </tr> <tr> <td data-row="2" data-col="1"></td> <td data-row="2" data-col="2"></td> <td data-row="2" data-col="3"></td> </tr> <tr> <td data-row="3" data-col="1"></td> <td data-row="3" data-col="2"></td> <td data-row="3" data-col="3"></td> </tr>
</table>
Даны также две переменные, в которых хранятся номер колонки и номер ряда:
let col = 2;
let row = 3;
Сделайте кнопку, по нажатию на которую в красный фон покрасится та ячейка, номер которой совпадает с номером из переменных.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>focusout</title>
</head>
<body>

<table id="table">
    <tr>
        <td data-row="1" data-col="1"></td>
        <td data-row="1" data-col="2"></td>
        <td data-row="1" data-col="3"></td>
    </tr>
    <tr>
        <td data-row="2" data-col="1"></td>
        <td data-row="2" data-col="2"></td>
        <td data-row="2" data-col="3"></td>
    </tr>
    <tr>
        <td data-row="3" data-col="1"></td>
        <td data-row="3" data-col="2"></td>
        <td data-row="3" data-col="3"></td>
    </tr>
</table>
<button>кнопка</button>
<script>

        let col = 2;
        let row = 3;
        let button = document.querySelector('button');
        button.addEventListener('click', function(){
        let rowTds = document.querySelectorAll('#table td[data-row = "' + row + '"]');
        for(let rowTd of rowTds){
        if( rowTd.dataset.col == col){
        rowTd.classList.add('color');
    };
    };
    });


</script>
</body>
</html>

ksa · #2 (**permalink**) 21.06.2021, 11:35

Сообщение от javascript888

Даны также две переменные, в которых хранятся номер колонки и номер ряда:
let col = 2;
let row = 3;

Для решения циклы не нужны...

http://code.mu/ru/javascript/manual/dom/rows/
http://code.mu/ru/javascript/manual/dom/cells/

od0201 · #3 (**permalink**) 21.06.2021, 13:37

<html>
  <style type="text/css">
    td{
      padding: 10px;
      border: 1px solid red;
    }
  </style>
<body>
<table id="table">
  <tr>    <td> </td><td> </td><td> </td>    </tr>
  <tr>    <td> </td><td> </td><td> </td>    </tr>
  <tr>    <td> </td><td> </td><td> </td>    </tr>
</table>
<button>кнопка</button>
<script>
  const [col,row]=[2,3]
  document.querySelector('button').addEventListener('click', function(){
    document.querySelector('table').rows[col-1].cells[row-1].style.background = 'red'
  });
</script>
</body>
</html>

рони · #4 (**permalink**) 21.06.2021, 15:18

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>up and down</title>
    <style type="text/css">
    table{
        border-collapse: collapse;
    }

    td{
        height: 40px;
        width: 40px;
        border: 1px solid rgba(0, 0, 128, 1);
        text-align: center;
    }
    td:after{
        content: attr(data-row)attr(data-col);
    }

    .active{
        background-color: rgba(255, 0, 255, 1);
    }

    </style>
</head>
<body>
<table id="table">
    <tr>
        <td data-row="1" data-col="1"></td>
        <td data-row="1" data-col="2"></td>
        <td data-row="1" data-col="3"></td>
    </tr>
    <tr>
        <td data-row="2" data-col="1"></td>
        <td data-row="2" data-col="2"></td>
        <td data-row="2" data-col="3"></td>
    </tr>
    <tr>
        <td data-row="3" data-col="1"></td>
        <td data-row="3" data-col="2"></td>
        <td data-row="3" data-col="3"></td>
    </tr>
</table>
<button>кнопка</button>
<script>
    const length = document.querySelectorAll('tr:first-child > td').length;
    const tds = document.querySelectorAll('td');
    let [col,row]=[2,3];
    const i = --row * length + --col;
    const {style} = tds[i];
    document.querySelector('button').addEventListener('click', function(){
        style.background = 'red'
    });
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript