Домашняя работа №3 - DOM, jQuery

[redexp]

Видео: https://youtu.be/nUytDI9El3U

Основная задача:

1. В тот же свой приватный репозиторий скопировать папку dom. По файлу index.html как обычно бот будет проверять вашу домашку
2. В index.html вы увидите таблицу с инпутами. Бот выберет наугад один из инпутов и попытается вставить (Ctrl + V) в него текст типа такого

Євпак Віктор Миколайович;ФОП;1985
Бондаренко Анатолій Васильович;міський голова;1974
Мойсієнко Василь Миколайович;перший проректор;1965

3. В index.js я уже подготовил обработку события paste и вычлинение текста из этого события
4. Вам нужно разбить этот текст так, чтобы получился массив

[
  ["Євпак Віктор Миколайович", "ФОП", "1985"],
  ["Бондаренко Анатолій Васильович", "міський голова", "1974"],
  ["Мойсієнко Василь Миколайович", "перший проректор", "1965"]
]

5. Необходимо добавить ячейки с инпутами в таблицу так, чтобы поместились все данные из этого массива. Например. Если бот вставляет текст в инпут a2 то таблица из такого вида

<table>
	<thead>
	<tr>
		<th>&nbsp;</th>
		<th>A</th>
		<th>B</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>1</th>
		<td><input type="text" name="a1" value=""/></td>
		<td><input type="text" name="b1" value=""/></td>
	</tr>
	<tr>
		<th>2</th>
		<td><input type="text" name="a2" value=""/></td>
		<td><input type="text" name="b2" value=""/></td>
	</tr>
	</tbody>
</table>

должна преобразоваться в вот такой вид

<table>
	<thead>
	<tr>
		<th>&nbsp;</th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>1</th>
		<td><input type="text" name="a1" value=""/></td>
		<td><input type="text" name="b1" value=""/></td>
		<td><input type="text" name="c1" value=""/></td>
	</tr>
	<tr>
		<th>2</th>
		<td><input type="text" name="a2" value="Євпак Віктор Миколайович"/></td>
		<td><input type="text" name="b2" value="ФОП"/></td>
		<td><input type="text" name="c2" value="1985"/></td>
	</tr>
	<tr>
		<th>3</th>
		<td><input type="text" name="a3" value="Бондаренко Анатолій Васильович"/></td>
		<td><input type="text" name="b3" value="міський голова"/></td>
		<td><input type="text" name="c3" value="1974"/></td>
	</tr>
	<tr>
		<th>4</th>
		<td><input type="text" name="a4" value="Мойсієнко Василь Миколайович"/></td>
		<td><input type="text" name="b4" value="перший проректор"/></td>
		<td><input type="text" name="c4" value="1965"/></td>
	</tr>
	</tbody>
</table>

Обратите внимание что появились <th>C</th> и пустой <input type="text" name="c1" value=""/> и каждая новая строчка имеет свой номер <th>3</th> и новые инпуты имеют имена с этим номером <input type="text" name="a3"...

Естественно, что бот будет вставлять несколько раз, разного размера данные, с разным размером строк и столбцов.

Усложнённое задание:

Под таблицами вы увидите две дивки #column-menu и #row-menu. В index.js я уже реализовал:

• появление #column-menu по клику на thead th правой клавишей мыши
• запоминание текущей колонки по которой кликнули
• обработку клика на каждом из пунктов меню

Ваша задача реализовать:

1. Добавление новой колонки слева от текущей колонки
2. Добавление новой колонки справа от текущей колонки
3. Удаление текущей колонки
4. Сделать всё тоже самое только для строк через #row-menu и правому клику по tbody th

Дополнительное задание:

не показывать #column-menu по клику не первый th (в котором нету буквы) <th>&nbsp;</th>

[KonstantinFaleev]

"В тот же свой приватный репозиторий скопировать папку regexp. По файлу index.html как обычно бот будет проверять вашу домашк" - тут скорее всего папка dom ?

[redexp]

@KonstantinFaleev точно, спасибо

[andrewvoinarovskyi]

Бот же буде перевіряти по файлу index.html, то можна перейменувати файл index.js в scrypt.js для зручності?

[redexp]

@andrewvoinarovskyi можно

[redexp]

Все кому нужен WebStorm, я достал купоны на 100% скидку. Всем кому нужен бесплатный WebStorm кидайте свои имейлы в форму https://forms.gle/YDzwg5BgTdNweYUN6 Естественно, что получат купоны только те кто прошёл проверку второго домашнего задания.

[nedopaka]

@redexp а что если в строке не ровно 2е ;, а больше/меньше? текст должен быть строго буквами укр. алфавита?

[redexp]

@anscorp в каждой строке будет строго одинаковое количество ; но их может быть сколько угодно. Никаких ограничений по символам в строке нету.

[andrewvitrenko]

бот будет вставлять текст только в те 4 инпута, которые есть изначально? или в созданные тоже?

[redexp]

@andriivitrenko я думал добавить в задание вставку и в созданные, но не придумал как это понятно объяснить, по этому бот будет вставлять только в один из этих четырёх инпутов.

[Daniil-Mudrak]

@redexp Вставлятися буде тільки рядок виду str \n str \n str, чи може приходити str \s str \s str?

[redexp]

@Daniel-developer5 не понял вопроса

[Daniil-Mudrak]

Ну буде приходити рядок в якому підрядки розделені символом переносу рядку, чи можуть бути розділені пробілом?

Типу, буде тільки так:
Євпак Віктор Миколайович;ФОП;1985
Бондаренко Анатолій Васильович;міський голова;1974
Мойсієнко Василь Миколайович;перший проректор;1965

Чи може прийти так:
Євпак Віктор Миколайович;ФОП;1985 Бондаренко Анатолій Васильович;міський голова;1974 Мойсієнко Василь Миколайович;перший проректор;1965

Вибачаюсь, якщо не зрозуміло будую питання

[redexp]

@Daniel-developer5 крайне странный вопрос. Прямо хочется написать "А ты сам как думаешь?!"... Только первый вариант...

[nedopaka]

@redexp по #16 (comment) если, допустим, в буфере такой текст

Євпак Віктор Миколайович;ФОП;1985;sadfasdfa ; sada8sdf98
Бондаренко Анатолій Васильович;міський голова;1974;вавыdsfsd
Мойсієнко Василь Миколайович;перший проректор;1965; asdfsd; adfasdf123

что мы должны получить на выходе? мы полностью игнорируем 2ю строчку?