Укажите изменения стиля таблицы с помощью флажка - PullRequest
Новая
       1

Укажите изменения стиля таблицы с помощью флажка

0 голосов
/ 27 февраля 2020

Есть ли способ, которым я могу изменить стиль выбранной строки, на любой другой с выбором флажка. Стили изменятся для выбранных строк, когда выбрана кнопка «Нажми меня». Я могу удалить строки (с помощью другой кнопки), но не могу изменить стили выбранных строк. Строки будут либо удалены, либо стиль изменится.

Может ли кто-нибудь помочь мне или покажет мне правильное направление для решения проблемы стиля?

HTML: 

<input class="dent" type="button" value="style">
<input class="delBtn" type="button" value="Delete">

<table>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
  <tr>
  <td style="width: 20px;">
    <input type="checkbox" class="chk">
   </td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>

  </tr><br>
</table>

JS для удаления строки 

function delBoxes() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = 0; i < boxes.length; i++) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = box.parentNode.parentNode;
       let tableTag = box.parentNode.parentNode.parentNode;
       tableTag.removeChild(rowTag);
     }
   }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);

1 Ответ

0 голосов
/ 27 февраля 2020

Я внес несколько изменений в ваш HTML, добавив идентификаторы для кнопок и строк. Также я добавил наборы данных в флажки, чтобы вы могли знать, какие строки выполнять задачу (изменить стиль или удалить) 

function delBoxes() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = boxes.length - 1; i >= 0; i--) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = document.getElementById(box.dataset.row);
       rowTag.parentNode.removeChild(rowTag);
     }
   }
}

function style() {
   let boxes = document.getElementsByClassName('chk');
   for (let i = boxes.length - 1; i >= 0; i--) {
     let box = boxes[i];
     if (box.checked) {
       let rowTag = document.getElementById(box.dataset.row);
       rowTag.style.backgroundColor = "red";
     }
   }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);
document.getElementById("styleButton").addEventListener("click", style);
<input class="dent" type="button" value="style" id="styleButton">
<input class="delBtn" type="button" value="Delete" id="deleteButton">

<table>
  <tr id="row1">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row1">
     </td>
    <td><input type="text" value="I am 1"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row2">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row2">
     </td>
    <td><input type="text"  value="I am 2"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row3">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row3">
     </td>
    <td><input type="text" value="I am 3"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="row4">
    <td style="width: 20px;">
      <input type="checkbox" class="chk" data-row="row4">
     </td>
    <td><input type="text" value="I am 4"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
...