<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Test JS</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
<th scope="col">Select</th>
</tr>
</thead>
<tbody>
<tr class="suka">
<th scope="row" class="bg-primary">1</th>
<td class="bg-primary">Mark</td>
<td class="bg-primary">Otto</td>
<td class="bg-primary">@mdo</td>
<td class="bg-primary">
<select id="lol">
<option value="-"></option>
<option value="yes">True</option>
<option value="no">False</option>
</select>
</tr>
<tr class="suka">
<th scope="row" class="bg-primary">1</th>
<td class="bg-primary">Mark</td>
<td class="bg-primary">Otto</td>
<td class="bg-primary">@mdo</td>
<td class="bg-primary">
<select id="lol">
<option value="-"></option>
<option value="yes">True</option>
<option value="no">False</option>
</select>
</tr>
<tr class="suka">
<th scope="row" class="bg-primary">1</th>
<td class="bg-primary">Mark</td>
<td class="bg-primary">Otto</td>
<td class="bg-primary">@mdo</td>
<td class="bg-primary">
<select id="lol">
<option value="-"></option>
<option value="yes">True</option>
<option value="no">False</option>
</select>
</tr>
</tbody>
</table>
<script type="text/javascript">
function mySexyBitch() {
var classNumber = document.querySelectorAll('#lol')
var classNumbers = document.querySelectorAll('.suka')
for (let i = 0; i < classNumber.length; i++)
classNumber[i].addEventListener('click', function (event) {
if (classNumber[i].value == 'yes') {
var zed = classNumbers[i].querySelectorAll('.bg-primary')
for (let i = 0; i < zed.length; i++)
zed[i].classList.add("bg-success")
zed[i].classList.remove("bg-warning")
}
if (classNumber[i].value == 'no') {
var zedd = classNumbers[i].querySelectorAll('.bg-primary')
for (let i = 0; i < zedd.length; i++)
zedd[i].classList.add("bg-warning")
zedd[i].classList.remove("bg-success")
}
if (classNumber[i].value == '-') {
var zeddd = classNumbers[i].querySelectorAll('.bg-primary')
for (let i = 0; i < zeddd.length; i++)
zeddd[i].classList.remove("bg-warning")
zeddd[i].classList.remove("bg-success")
}
})
}
mySexyBitch()
</script>
</form>
</body>
const valueAndClass = [
[ 'yes', 'bg-success' ],
[ 'no', 'bg-warning' ],
];document.querySelector('table').addEventListener('change', e => {
for (const td of e.target.closest('tr').cells) {
for (const [ value, className ] of valueAndClass) {
td.classList.toggle(className, value === e.target.value);
}
}
});bg-primary у ячеек, добавьте его строкам, а обработчик события change пусть будет таким, например:document.querySelector('table').addEventListener('change', ({ target: t }) => {
const tr = t.closest('tr');
valueAndClass.forEach(n => tr.classList.toggle(n[1], n[0] === t.value));
});