Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.01.2017, 17:55
Интересующийся
Отправить личное сообщение для mserega Посмотреть профиль Найти все сообщения от mserega
 
Регистрация: 16.05.2014
Сообщений: 21

Генератор списка уроков с помощью 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:18.
Ответить с цитированием
  #2 (permalink)  
Старый 01.01.2017, 18:10
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

mserega, http://javascript.ru/formatting
Ответить с цитированием
  #3 (permalink)  
Старый 01.01.2017, 18:15
Интересующийся
Отправить личное сообщение для mserega Посмотреть профиль Найти все сообщения от mserega
 
Регистрация: 16.05.2014
Сообщений: 21

Сообщение от Rise Посмотреть сообщение
mserega, http://javascript.ru/formatting
А что не так?
Ответить с цитированием
  #4 (permalink)  
Старый 01.01.2017, 18:20
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

mserega, форму покажи.
Ответить с цитированием
  #5 (permalink)  
Старый 01.01.2017, 18:24
Интересующийся
Отправить личное сообщение для mserega Посмотреть профиль Найти все сообщения от mserega
 
Регистрация: 16.05.2014
Сообщений: 21

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 01.01.2017, 18:40
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

mserega, "Добавить урок" что делает?
Ответить с цитированием
  #7 (permalink)  
Старый 01.01.2017, 20:30
Интересующийся
Отправить личное сообщение для mserega Посмотреть профиль Найти все сообщения от mserega
 
Регистрация: 16.05.2014
Сообщений: 21

Сообщение от Rise Посмотреть сообщение
mserega, "Добавить урок" что делает?
Просто я решил на будущие уже чтобы потом не придумывать. Каждый год расписание уроков может меняться. Один семестр в понедельник может быть 6 уроков, другой семестр 7 уроков. Поэтому кнопка "добавить урок" будет добавлять колво уроков которые нужно добавить. Или же например возле надписи "Понедельник" сделать какой то элемент в котором указать сколько input нужно создать для понедельника.
Ответить с цитированием
  #8 (permalink)  
Старый 01.01.2017, 22:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

таблица вставка строки
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>
Ответить с цитированием
  #9 (permalink)  
Старый 02.01.2017, 11:50
Интересующийся
Отправить личное сообщение для mserega Посмотреть профиль Найти все сообщения от mserega
 
Регистрация: 16.05.2014
Сообщений: 21

рони, Все почти так, но когда я хочу посмотреть исходный код то пропадает номерация уроков, и уроки которые добавлены через скрипт их не видно. Возможно ли как то через кнопку вывести html код в отдельном окне?
Ответить с цитированием
  #10 (permalink)  
Старый 02.01.2017, 14:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью js поменять содержимое content у псевдоэлементов before и after? grifangel Общие вопросы Javascript 3 17.10.2013 21:11
Не работает скрипт отображения списка Konstantine Javascript под браузер 3 18.03.2013 06:00
Отображение длинного URL с помощью JS velo Общие вопросы Javascript 2 28.10.2009 10:07
Как получить доступ к ссылкам в iframe с помощью js Gratt Общие вопросы Javascript 4 01.09.2009 21:17
Нужно с помощью JS записывать данные в БД d!mm Общие вопросы Javascript 2 01.11.2008 18:36