Javascript-форум - Залить бэкграунд строки при установленном чекбоксе

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Залить бэкграунд строки при установленном чекбоксе (https://javascript.ru/forum/dom-window/85540-zalit-behkgraund-stroki-pri-ustanovlennom-chekbokse.html)

Залить бэкграунд строки при установленном чекбоксе

Здравствуйте

В каждой строке динамической таблицы есть чекбокс, нужно при установленном флажке чекбокса(-ов), заливать цветом бэкграунд строки (в которой находится чекбокс). И при снятии флажка чекбокса(-ов) менять бэкграунд на backgroundColor=''
На данный момент заливка/удаление цвета бэкграунда строк происходит рандомно
Буду благодарен за помощь

function xxx(){
	t = document.getElementById('iItemTbl'); //таблица
	var index = 0;
	for (var i = 0; i < t.rows.length; i++){
		id = "r"+i+"c0"; //id чекбокса
		if (document.getElementById(id).checked){
			index++;
			stroka = i; //номер строки таблицы
			t.rows[stroka].style.backgroundColor  = 'green';		
		}else{
			t.rows[stroka].style.backgroundColor  = '';
		}
	}
}

добавил переменную stroka = i; после else и функция стала нормально выполняться

sashgera,

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #iItemTbl tr.active td {
            background-color: #008000;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let table = document.getElementById('iItemTbl');
            table.addEventListener('change', ({
                target
            }) => {
                if (target = target.closest('input[id*=c0]')) {
                    let tr = target.closest('tr');
                    tr.classList.toggle('active', target.checked)
                }
            })
        })
    </script>
</head>
<body>
    <table id="iItemTbl">
        <thead>
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
                <th>Title 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1.1</td>
                <td>Cell 1.2</td>
                <td><input id="r0c0" type="checkbox"></td>
            </tr>
            <tr>
                <td>Cell 2.1</td>
                <td>Cell 2.2</td>
                <td><input id="r1c0" type="checkbox"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

рони, спасибо!

Цитата:

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

нужно при установленном флажке чекбокса(-ов), заливать цветом бэкграунд строки (в которой находится чекбокс)

Теперь можно такое на css реализовать...

<style type="text/css">
        #iItemTbl tr:has(:checked) {
            background-color: #008000;
        }
    </style>
    <table id="iItemTbl">
        <thead>
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
                <th>Title 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1.1</td>
                <td>Cell 1.2</td>
                <td><input id="r0c0" type="checkbox"></td>
            </tr>
            <tr>
                <td>Cell 2.1</td>
                <td>Cell 2.2</td>
                <td><input id="r1c0" type="checkbox"></td>
            </tr>
        </tbody>
    </table>

Цитата:

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

Теперь можно такое на css реализовать...

Ну если забыть про Firefox.

Можно без has:

<style type="text/css">
        #iItemTbl tr {
            position: relative;
        }
        #iItemTbl tr :checked + .background {
            background-color: #008000;
            position: absolute;
            inset: 0;
            z-index: -1;
        }
    </style>
    <table id="iItemTbl">
        <thead>
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
                <th>Title 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1.1</td>
                <td>Cell 1.2</td>
                <td>
                  <input id="r0c0" type="checkbox">
                  <div class="background"></div>
                </td>
            </tr>
            <tr>
                <td>Cell 2.1</td>
                <td>Cell 2.2</td>
                <td>
                  <input id="r1c0" type="checkbox">
                  <div class="background"></div>
                </td>
            </tr>
        </tbody>
    </table>