Advertisement
Rusfatal

Untitled

Aug 7th, 2022
714
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Очищаемая таблица</title>
  7.   <link href="style.css" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11. <h2>Пример минимально необходимой структуры таблицы (только HTML) для прохождения тестов:</h2>
  12. <div class="example">
  13.   <table>
  14.     <thead>
  15.     <tr>
  16.       <th>Имя</th>
  17.       <th>Возраст</th>
  18.       <th>Зарплата</th>
  19.       <th>Город</th>
  20.       <th></th>
  21.     </tr>
  22.     </thead>
  23.     <tbody>
  24.     <tr>
  25.       <td>Ilia</td>
  26.       <td>25</td>
  27.       <td>1000</td>
  28.       <td>Petrozavodsk</td>
  29.       <td><button>X</button></td>
  30.     </tr>
  31.     </tbody>
  32.   </table>
  33. </div>
  34.  
  35. <h2>Результат выполнения вашего кода:</h2>
  36.  
  37. <script>
  38.  
  39.   class UserTable {
  40.     elem;
  41.     rows;
  42.     constructor(rows) {
  43.       this.elem = document.createElement('table'); // при нициализации экземпляра класса (ЭК) будет сразу создан элемент с тегом table и свойством класса elem
  44.       this.rows = rows; // в свойство ЭК rows записывается объект со строками rows
  45.       this.createTable(); // сразу вызываем метод класса для создания таблиц
  46.       this.eventListen(); // метод удаления строк
  47.  
  48.     }
  49.     get elem() {return this.elem;} // вызов свойства elem
  50.     // описываем метод для создания и редактирования таблицы
  51.     createTable(){
  52.       // добавляем в элемент elem ( тег table) заголовки таблицы
  53.       this.elem.insertAdjacentHTML("beforeEnd",
  54.         `<thead id="th">
  55.     <tr>
  56.       <th>Имя</th>
  57.       <th>Возраст</th>
  58.       <th>Зарплата</th>
  59.       <th>Город</th>
  60.       <th></th>
  61.     </tr>
  62.     </thead>`);
  63.       // перебираем в цикле все строки из массива rows  и добавляем в таблицу
  64.       let i = 0;
  65.       for (let r of this.rows){
  66.         i+=1;  // ид номер каждой добавляемой строки в таблице
  67.         console.log(r);  // тест
  68.         this.elem.insertAdjacentHTML("beforeEnd",
  69.           `<tbody>
  70.         <tr id="${i}">
  71.           <td>${r.name}</td>
  72.           <td>${r.age}</td>
  73.           <td>${r.salary}</td>
  74.           <td>${r.city}</td>
  75.           <td><button>X</button></td>
  76.         </tr>
  77.       </tbody>`);}}
  78.  
  79.  
  80.     // добавляем обработчик события на клик на элемент с тегом button
  81.     eventListen() {
  82.  
  83.       let s = this.elem.querySelectorAll("button");  // находим кнопки
  84.       let h = this.elem.querySelectorAll('#th')[0];  // заголовок таблицы
  85.       let l = s.length; // считаем сколько всего кнопок найдено
  86.       for(let b of s){
  87.         b.addEventListener("click", function (e) {
  88.             e.target.parentElement.parentElement.remove();
  89.             l -= 1; // если удалили все строки таблицы, то удаляем и заголовок
  90.             if(l<1){h.remove()};
  91.          }
  92.        )};
  93.    }
  94.  };
  95.  
  96.  
  97.  
  98.  let rows = [
  99.    {
  100.      name: 'Ilia',
  101.      age: 25,
  102.      salary: 1000,
  103.      city: 'Petrozavodsk'
  104.    },
  105.    {
  106.      name: 'Vasya',
  107.      age: 14,
  108.      salary: 1500,
  109.      city: 'Moscow'
  110.    },
  111.    {
  112.      name: 'Ivan',
  113.      age: 22,
  114.      salary: 100,
  115.      city: 'Bryansk'
  116.    },
  117.    {
  118.      name: 'Petya',
  119.      age: 45,
  120.      salary: 990,
  121.      city: 'Chita'
  122.    }
  123.  ];
  124.  
  125.  let table = new UserTable(rows);
  126.  document.body.append(table.elem);
  127.  
  128. </script>
  129. </body>
  130.  
  131. </html>
  132.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement