Необходимо изменить код под 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 понятия не имею. Помогите. Я студент и пока вообще не поняла тему библиотек. Поэтому потом буду читать доп литературу. А на данный момент надо сдать работу - сроки горят. |
добавление/удаление строк в таблицу на 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>
|
Спасибо за помощь!
Спасибо огромное! Обязательно разберусь с этой темой! И с кодом, который Вы прислали. Еще раз спасибо.
|
Можно так как нибудь. :)
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();
});
|
Цитата:
удалить строку в середине, добавить новую, проверить все name |
Это не рабочий продуманный детально код это идея как еще можно сделать, а так запилил переменную с айди и так же записывай туда чего хошь хоть последовательный айди хоть случайно сгенерированный :)
|
| Часовой пояс GMT +3, время: 09:20. |