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)

mserega

01.01.2017 17:55

Генератор списка уроков с помощью 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 а потом после ввода уроков на всю неделю и нажатием на кнопку оно генерировало мне такой код как выше... можете помочь.

mserega

01.01.2017 18:15

Цитата:

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

mserega, http://javascript.ru/formatting

А что не так?

mserega

01.01.2017 18:24

<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>

mserega

01.01.2017 20:30

Цитата:

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

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

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

рони	01.01.2017 22:18

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

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>

mserega

02.01.2017 11:50

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

рони	02.01.2017 14:13

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

mserega

02.01.2017 15:48

Цитата:

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

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

рони	02.01.2017 15:57

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

mserega

02.01.2017 16:09

Цитата:

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

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

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

laimas

02.01.2017 16:20

Цитата:

Сообщение от mserega

А можете в скрипте сделать чтобы оно писало нумерацию?

А кто определять нумерацию уроков должен скрипт или же все-таки учителя, директор школы или свыше?

mserega

02.01.2017 16:55

Цитата:

Сообщение от laimas (Сообщение 439537)

А кто определять нумерацию уроков должен скрипт или же все-таки учителя, директор школы или свыше?

Нумерация она просто нужна для списка. Так как они указаны по возрастанию. Тот скрипт что сверху подходит. Но я с его помощью хочу генерировать HTML код который потом вставлю в файл и буду через IFRAME вставлять на сайт.

laimas

02.01.2017 17:21

Цитата:

Сообщение от mserega

Нумерация она просто нужна для списка.

Ну прямо оригинально - речь идет о добавлении уроков в расписание, то есть к примеру Химия в один понедельник может быть первой, в другой последней, типа рулетки?

mserega

02.01.2017 17:24

Цитата:

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

mserega, в чем преимущество такой генерации перед обычной правкой файла?

Ну просто расписание будет делать тот челок который в HTML ничего не знает. И я хочу понятным способом ему сделать. Что копировать вставить он сможет сам готовый код.

laimas, скрипт который выше в принцепе то что я хотел, но единственный минус в том, что прийдеться пронумеровать вручную потом предметы и все. А так то что я хотел.

рони	02.01.2017 17:37

mserega,
чем css счётчик не устраивает?

laimas

02.01.2017 17:40

Цитата:

Сообщение от mserega

скрипт который выше в принцепе то что я хотел

Странное однако составление расписания. А вообще же, по уму, если в понедельник математика вторым уроком, то она всегда должна быть вторым, так определено расписанием, а не скриптом, а тем более стилями. Добавление же нового урока должно подразумевать и помещение его в определенную позицию расписания, а не как бог послал, и делается это либо пользовательской сортировкой, либо, что естественно для расписания по времени, ибо урок предполагает время его начала и продолжительность.

А то что вас подошло, это не расписание, это список желаний.

mserega

02.01.2017 17:45

Цитата:

Сообщение от laimas (Сообщение 439544)

если в понедельник математика вторым уроком, то она всегда должна быть вторым.

вы меня не так поняли.. Каждый год расписание меняется. Если один год математика в 9 класе была первая, то уже на следующий год у другого 9 класа будет другой предмет.

Цитата:

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

mserega,
чем css счётчик не устраивает?

Что касается СSS нумерации то я ж говорю что ее не возможно скопировать в html и прийдется нумеровать вручную. Все остальное идельно.

Цитата:

Сообщение от laimas (Сообщение 439544)

Добавление же нового урока должно подразумевать и помещение его в определенную позицию расписания

Уроки уже раставлены по позициях. Просто надо ввести их в форму. Изменяться они не будут.

laimas

02.01.2017 17:54

Цитата:

Сообщение от mserega

Если один год математика в 9 класе была первая, то уже на следующий год у другого 9 класа будет другой предмет.

Ну это же не означает, что порядок предмета в дне недели определяется некой случайной нумерацией, которая зависит от того как предмет передали формой или еще не понять чем.

рони	02.01.2017 17:58

Цитата:

Сообщение от mserega

ее не возможно скопировать в html

а зачем? копируйте css

mserega

02.01.2017 18:00

Цитата:

Сообщение от laimas (Сообщение 439546)

В общем смотрите. Написали список уроков.

Понедельник:
1. Математика
2. Физкультура
.....
6. Астрономия

Вторник:
1. История
.....
6. Информатика

Все.... Я беру этот список и по скрипту. Выбрал понедельник и ввел все 6 уроков. Потом вторник и так далее. Потом беру исходный код и копирую тот код который получился в результате. Но загвостка в том что будет просто список без нумерации. И я буду нумеровать вручную.

mserega

02.01.2017 18:03

Цитата:

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

а зачем? копируйте css

Скрипт будет на отдельной страницы чисто для генерации кода.

laimas

02.01.2017 18:24

Да как душе угодно, Но:

1) Расписание занятий, это предметы которые начинаются и заканчиваются в определенное время.
2) Расписание занятий лучше хранить в базе, ибо на расписании завязана в общем то вся жизнь в школе в течении учебного года.
3) При выводе расписания занятий запрос сортируется по времени начала предмета, что автоматически и определяет нумерацию их в расписании, которую отобразить, именно отобразить, а не определить, можно и при выводе на стороне сервера, и посредством css как тоже говорилось.

У вас же речь идет о добавлении, которое почему-то связано с нумерацией не понятно каким образом.

рони	02.01.2017 18:28

Цитата:

Сообщение от mserega

Скрипт будет на отдельной страницы чисто для генерации кода.

почему нельзя использовать css, я так и не понял.

mserega

02.01.2017 18:32

Цитата:

Сообщение от laimas (Сообщение 439551)

1. Время здесь не причем. Есть список на год и все. Потом он сотрется и напишется другой.
2. В моем случаи нету смысла записывать в базу.
3. не нужно никакого времени. Просто список....

laimas

02.01.2017 18:35

mserega,
у вас неверное представление о представлении данных.

mserega

02.01.2017 18:44

Ладно внес некоторые изменения ив вставил СSS нумерацию. Теперь будет все нормально. Всем спасибо.

Часовой пояс GMT +3, время: 06:49.