Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2016, 09:41
Интересующийся
Отправить личное сообщение для Corazon Посмотреть профиль Найти все сообщения от Corazon
 
Регистрация: 19.12.2016
Сообщений: 12

Необходимо изменить код под jquery
Помогите, пожалуйста. Попыталась переписать задачу 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, 10:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,649

добавление/удаление строк в таблицу на jquery
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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2016, 11:35
Интересующийся
Отправить личное сообщение для Corazon Посмотреть профиль Найти все сообщения от Corazon
 
Регистрация: 19.12.2016
Сообщений: 12

Спасибо за помощь!
Спасибо огромное! Обязательно разберусь с этой темой! И с кодом, который Вы прислали. Еще раз спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2016, 14:23
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Можно так как нибудь.
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, 15:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,649

Сообщение от dd_smol
var num = $('tr', this).length - 2;
где гарантия от повторения? для проверки: добавить 3 строки,
удалить строку в середине, добавить новую, проверить все name
Ответить с цитированием
  #6 (permalink)  
Старый 19.12.2016, 16:02
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как упростить этот код при использовании jquery ? Нубопрогер Элементы интерфейса 3 15.02.2015 06:20
Перевести код с prototype в jquery alexey_samara jQuery 2 07.12.2010 15:52
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 21:59
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM jQuery 0 15.09.2010 01:17
Изменить текст под изображением на котором событие onclick GodRa Общие вопросы Javascript 2 12.11.2008 22:15