Javascript-форум - Генератор списка уроков с помощью JS

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Генератор списка уроков с помощью JS (https://javascript.ru/forum/events/66679-generator-spiska-urokov-s-pomoshhyu-js.html)

Генератор списка уроков с помощью JS

У меня есть код html

<table class="table table-bordered">

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

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

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

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

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

</table>

Хочу сделать форму чтобы можна было просто вводить название предмета в input а потом после ввода уроков на всю неделю и нажатием на кнопку оно генерировало мне такой код как выше... можете помочь.

Цитата:

Сообщение от Rise (Сообщение 439506)

mserega, http://javascript.ru/formatting

А что не так?

<p>Понедельник</p>
<input id="pyrok1" name="pyrok1" type="text">
<button>Добавить урок</button>

<p>Вторник</p>
<input id="vyrok1" name="vyrok1" type="text">
<button>Добавить урок</button>


......


<button>Генерировать HTML код</button>

Цитата:

Сообщение от Rise (Сообщение 439510)

mserega, "Добавить урок" что делает?

Просто я решил на будущие уже чтобы потом не придумывать. Каждый год расписание уроков может меняться. Один семестр в понедельник может быть 6 уроков, другой семестр 7 уроков. Поэтому кнопка "добавить урок" будет добавлять колво уроков которые нужно добавить. Или же например возле надписи "Понедельник" сделать какой то элемент в котором указать сколько input нужно создать для понедельника.

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

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>

рони, Все почти так, но когда я хочу посмотреть исходный код то пропадает номерация уроков, и уроки которые добавлены через скрипт их не видно. Возможно ли как то через кнопку вывести html код в отдельном окне?

mserega,
нумерация сделана с помощью css -- смотреть код с новыми строками можно в браузере(хром) - F12 - Elements - встать на элемент table -- правой кнопкой Copy - Copy outerHTML

Цитата:

Сообщение от рони (Сообщение 439533)

Я пользуюсь мозилой, но ладно зашел в хром. и там оно пишет ::before == $0

mserega,
видимо я вам не могу помочь ...

Цитата:

Сообщение от рони (Сообщение 439535)

mserega,
видимо я вам не могу помочь ...

А можете в скрипте сделать чтобы оно писало нумерацию? Ведь то я пример приводил. Список будет пуст. И я буду забивать его с 0.