Показать сообщение отдельно
  #5 (permalink)  
Старый 01.01.2017, 22:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,147

таблица вставка строки
mserega,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .info {
    counter-reset: list;
   }
  .info td{
    font-weight: bold;
  }

  .table-bordered{
     width: 300px;
  }
  .table-bordered .info ~ tr .warning:nth-child(1){
    font-weight: bold;
     width: 30px;
  }
  .table-bordered .info ~ tr .warning:nth-child(1):before{
    position: absolute;
    display: block;
    margin-top: -10px;
    counter-increment: list;
    content: counter(list)".";
    color: #FF0000;
  }

  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector(".form"),
        day = form.querySelector(".day"),
        lesson = form.querySelector(".lesson"),
        btn = form.querySelector(".btn");
    btn.addEventListener("click", function(event) {
        event.preventDefault();
        var tbody = document.querySelector(".table-bordered tbody"),
            str = '<tr><td class="trles warning"></td><td>' + lesson.value + "</td></tr>",
            tr = tbody.querySelectorAll(".info")[day.value];
        tr ? tr.insertAdjacentHTML("beforeBegin", str) : tbody.insertAdjacentHTML("beforeEnd", str)
    })
});
  </script>
</head>

<body>
<table class="table table-bordered">

<!-- Понеділок -->
<tr class="info"><td align="center" colspan="2">Понеділок</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (чит)</td></tr>
<tr><td class="trles warning"></td><td>Математика</td></tr>
<tr><td class="trles warning"></td><td>Основи здоров'я</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (укр.м.)</td></tr>
<tr><td class="trles warning"></td><td>Фізична культура</td></tr>
<!-- /Понеділок -->

<!-- Вівторок -->
<tr class="info"><td align="center" colspan="2">Вівторок</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (читання)</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (укр. мова)</td></tr>
<tr><td class="trles warning"></td><td>Математика</td></tr>
<tr><td class="trles warning"></td><td>Іноземна</td></tr>
<tr><td class="trles warning"></td><td>Музичне мистецтво</td></tr>
<!-- Вівторок -->

<!-- Середа -->
<tr class="info"><td align="center" colspan="2">Середа</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти(чит.)</td></tr>
<tr><td class="trles warning"></td><td>Математика</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (укр. мова)</td></tr>
<tr><td class="trles warning"></td><td>Природознавство</td></tr>
<tr><td class="trles warning"></td> <td>Фізична культура</td></tr>
<!-- Середа -->

<!-- Четвер -->
<tr class="info"><td align="center" colspan="2">Четвер</td></tr>
<tr><td class="trles warning"></td><td>Природознавство</td></tr>
<tr><td class="trles warning"></td><td>Образотворче мистецтво</td></tr>
<tr><td class="trles warning"></td><td>Трудове навчання</td></tr>
<tr><td class="trles warning"></td><td>Індивідуальна робота</td></tr>
<!-- Четвер -->

<!-- П'ятниця -->
<tr class="info"><td align="center" colspan="2">П'ятниця</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (чит.)</td></tr>
<tr><td class="trles warning"></td><td>Математика</td></tr>
<tr><td class="trles warning"></td><td>Навчання грамоти (укр.мова)</td></tr>
<tr><td class="trles warning"></td><td>Фізична культура</td></tr>
<!-- П'ятниця -->

</table>
<form action="http://" class="form">
<select name="day" size="1" class="day">
<option value="1">Понеділок</option>
<option value="2">Вівторок</option>
<option value="3">Середа</option>
<option value="4">Четвер</option>
<option value="5">П'ятниця</option>
</select>
<input class="lesson" name="lesson" type="text">
<button class="btn">Добавить урок</button>

</form>

</body>
</html>
Ответить с цитированием