Slyweb
На разработку сайта! Скидки 50%!

Динамическое добавление элементов

Вы можете задавать любые вопросы по jQuery.

Динамическое добавление элементов

Сообщение Sanyo » 16 фев 2010, 08:14

Есть поле и рядом с ним две кноки + и -
Нажимаешь по кнопке + добавляется еще одно поле, по кнопке - , удаляется соответственно.

Как-то по ненадобности находил отличный пример... Были рисованные кнопки + и - и при их нажатии ПЛАААВНО добавлялась\удалялась форма....

Подскажите где копать, не нашел :(
Sanyo
 
Сообщения: 3
Зарегистрирован: 16 фев 2010, 08:12

Re: Динамическое добавление элементов

Сообщение A.N.R.I » 16 фев 2010, 10:39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

<script type="text/javascript">

$(function() {
var i = $('li').size() + 1;

$('a#add').click(function() {
$('<li>' + i + '</li>').appendTo('ul');
i++;
});

$('a#remove').click(function() {
$('li:last').remove();
i--;

});
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<a href="#" id="add">+</a><br />
<a href="#" id="remove">-</a>
</body>
</html>
A.N.R.I
 
Сообщения: 4
Зарегистрирован: 04 ноя 2009, 23:02

Re: Динамическое добавление элементов

Сообщение Sanyo » 16 фев 2010, 11:32

Спасибо за пример!

А можешь подсказать как значения списка ul li передать в массив к примеру, т.е. запомнить их и вывести на другой странице
Sanyo
 
Сообщения: 3
Зарегистрирован: 16 фев 2010, 08:12

Re: Динамическое добавление элементов

Сообщение Sanyo » 16 фев 2010, 11:39

Я находил вот такой пример:
Но он только дабавляет и выводит, а надо еще кнопку что бы удалял (
Пробовал действия от обратного, но не смог (

Код: Выделить всё
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="myform">
<table id="keytable">
  <tr><td>Keyword</td><td><input type="text"
    name="keyword_1"></td></tr>
</table>
</form>

<input type="button" onclick="addkeyword()" value="Add Keyword">
<input type="button" onclick="dosubmit()" value="Submit">

<div id="result" style="padding:5px;">
</div>

<script>
var nextkeyid = 2;
function addkeyword()
{
  var elTR = $('keytable').insertRow( -1 );

  var elTitleTD = elTR.insertCell( -1 );
  elTitleTD.appendChild( document.createTextNode( 'Keyword' ) );

  var elInput = document.createElement( 'input' );
  elInput.type = 'text';
  elInput.name = 'keyword_'+nextkeyid;
  nextkeyid++;

  var elInputTD = elTR.insertCell( -1 );
  elInputTD.appendChild( elInput );
}
function dosubmit( ) {
  new Ajax.Updater( 'result', 'add.php',
    { method: 'post', parameters: $('myform').serialize() } );
}
</script>
</body>
</html>
Sanyo
 
Сообщения: 3
Зарегистрирован: 16 фев 2010, 08:12


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron