Форум

Corazon · #1 (**permalink**) 19.12.2016, 10:41

Помогите, пожалуйста. Попыталась переписать задачу DHTML на jQuery, но вообще ничего не работает. Исходный код:

<head>
	<title>E-mail</title>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

[JS]/*
Сверстайте HTML и напишите скрипт таким образом, чтобы при нажатии на ссылку «Добавьте контакт» появлялись поля для 
ввода имени и адреса эл.почты. Начиная со второй строки должна появлятся пиктограмма del.jpg, при нажатии на которую 
текущая строка должна удаляться. Обратите внимание, что у каждого поля должно быть уникальное имя.
*/

function addContact (){
	
	var tablica = document.getElementById ("contacts"); //получение доступа к элементу tbody с id contacts
	var newStroka = tablica.insertRow (-1); //добавляем строку
	var newCell = newStroka.insertCell (-1); //добвляем еще одну ячейку к строке
	if (tablica.rows.length == 3) newCell.innerHTML = " "; //делаем пробел в первой строке вместо рисука del.jpg
	else //иначе в последующих строках в первой ячейке вместо пробела добавляем рисунок
	   {
	   var im = document.createElement ("img");
	   im.src = "del.jpg";
	   im.onclick = removeContact; //вызов функции при клике на картинку, для удаления строки
	   newCell.appendChild (im);
	   }
	   
	//подсчет количества кликов, т.е. количества добавленных строк   
	NUM = (!self.NUM) ? 1 : ++NUM; //и такую запись честно подсмотрела на просторах интернета 
	
	//создаем поле для ввода имени с атрибутом name
	var newCell = newStroka.insertCell (-1);
	var inpName = document.createElement ("input");
	inpName.name = "name" + NUM; 
	newCell.appendChild (inpName);
	
	//сщздаем поле для ввода email с атрибутом name
	var newCell = newStroka.insertCell (-1);
	var inpEmail = document.createElement ("input");
	inpEmail.name = "email" + NUM; 
	newCell.appendChild (inpEmail);
	
	//функция для удаления строк по клику на картинку
	function removeContact (event){
		var obj = event.target;
		document.getElementById ("contacts").deleteRow(obj.parentNode.parentNode.rowIndex);
	}
}[/JS]

</head>
<body>
  <table>
     <tbody id="contacts">
        <tr>
        <td colspan="3"><a href="#" onclick = "addContact();">Добавьте контакт</a></td>
        </tr>
        <tr>
           <td width = 20 ></td>
           <td>Имя </td>
           <td>Email</td>
        </tr>
     </tbody>
  </table>
</body>

Так задача отлично работает. Вот как сделать под jQuery понятия не имею. Помогите. Я студент и пока вообще не поняла тему библиотек. Поэтому потом буду читать доп литературу. А на данный момент надо сдать работу - сроки горят.

рони · #2 (**permalink**) 19.12.2016, 11:42

Corazon,

<head>
  <title>E-mail</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function() {
    var table = $("#contacts"),
        btn = $("a", table),
        img = $("<img>", {
            src: "http://s1.iconbird.com/ico/0912/fugue/w32h321349011799cross.png"
        }),
        td = $("<td>"),
        inp = $("<input>"),
        NUM = 0;

    function addContact(event) {
        event.preventDefault();
        var tr = $("<tr>").appendTo(table);
        var del = img.clone().on({
            click: function() {
                tr.remove()
            }
        });
        var t = td.clone().appendTo(tr);
        $("tr", table).length > 3 && del.appendTo(t);
        t = td.clone().appendTo(tr);
        var i = inp.clone().appendTo(t);
        i.attr({
            name: "name" + ++NUM
        });
        t = td.clone().appendTo(tr);
        i = inp.clone().appendTo(t);
        i.attr({
            name: "email" +
                NUM
        })
    }
    btn.on({
        click: addContact
    })
});

 </script>
</head>
<body>
  <table>
     <tbody id="contacts">
        <tr>
        <td colspan="3"><a href="#" >Добавьте контакт</a></td>
        </tr>
        <tr>
           <td width = 20 ></td>
           <td>Имя </td>
           <td>Email</td>
        </tr>
     </tbody>
  </table>
</body>

Corazon · #3 (**permalink**) 19.12.2016, 12:35

Спасибо огромное! Обязательно разберусь с этой темой! И с кодом, который Вы прислали. Еще раз спасибо.

dd_smol · #4 (**permalink**) 19.12.2016, 15:23

Можно так как нибудь.

jQuery(function ( $ ) {
  $('#contacts a').click(function (e) {
    $('#contacts').append(function () {
        var num = $('tr', this).length - 2;

        return $('<tr />').html(
          '<td><input type="text" name="name' + num + '"></td>' +
          '<td><input type="text" name="email' + num + '"></td>'
        ).prepend(function () {
          return $('<td />').html(function () {
            return num < 1 ? '' : $('<img src="http://s1.iconbird.com/ico/0912/fugue/w32h321349011799cross.png" />').click(function (e) {
              $(this).parents('tr').remove();
            });
          });
        });
    });
  }).click();
});

рони · #5 (**permalink**) 19.12.2016, 16:28

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

var num = $('tr', this).length - 2;

где гарантия от повторения? для проверки: добавить 3 строки,
удалить строку в середине, добавить новую, проверить все name

dd_smol · #6 (**permalink**) 19.12.2016, 17:02

Это не рабочий продуманный детально код это идея как еще можно сделать, а так запилил переменную с айди и так же записывай туда чего хошь хоть последовательный айди хоть случайно сгенерированный

Форум

Справочник

Discord чат

Курсы javascript