Dynamiczne dodawanie wierszy za pomocą jQuery

Tworzę formularz, w którym potrzebuję kilku dodatkowych danych wejściowych i mam w zasadzie to:
https://i.stack.imgur.com/lWvUW.png
Za każdym razem, gdy użytkownik kliknie przycisk Plus, do formularza trzeba dodać nowy wiersz danych wejściowych, jak mogę to zrobić w jQuery?

Możliwe jest również automatyczne dodanie nowej linii, gdy wszystkie linie

(lub po prostu ostatnia linia, jeśli jest łatwiej/szybciej)

wypełniony?

Dzięki temu użytkownik nie musi naciskać przycisku Plus.
Przepraszam, że zadam może takie proste pytanie, ale nadal jestem bardzo zielony z jQuery, mógłbym to zrobić z PHP, ale jestem pewien, że Javascript/jQuery odgrywa tutaj lepszą rolę.
Z góry dziękuję!

@alex:
>

<!DOCTYPE html>

<head>

<script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]

<script type="text/javascript">

$form = $('#personas');

$rows = $form.find('.person');$('a#add').click(function() {

 $rows.find(':first').clone().insertAfter($rows.find(':last'));

 $justInserted = $rows.find(':last');

 $justInserted.hide();

 $justInserted.find('input').val('');// it may copy values from first one

 $justInserted.slideDown(500);

});

</script>

</head><body>

<form id="personas" name="personas" method="post" action="">

 <table width="300" border="1" cellspacing="0" cellpadding="2">

 <tr>

 <td>Name</td>

 <td>More?</td>

 </tr>

 <tr class="person">

 <td><input type="text" name="name[]" id="name[]"/></td>

 <td>[url="#" id="add">+[/url]</td>

 </tr>

 </table>

</form>

</body>

</html>

Zaproszony:

5 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

Pomoże ci to podejść bliżej, przycisk Dodaj został usunięty ze stołu, więc możesz rozważyć to ...

<script type="text/javascript">

 $(document).ready(function() {

 $("#add").click(function() {

 $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');

 return false;

 });

 });

</script>

Tak wygląda znacznik HTML

<a id="add">+[/url]</td>

 <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">

 <tbody>

 <tr>

 <td>Name</td>

 </tr>

 <tr class="person">

 <td><input type="text" name="name" id="name"/></td>

 </tr>

 </tbody>

 </table>

Edytować

aby wyczyścić wartość pola tekstowego po wklejeniu.

$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');

 $('#mytable tbody>tr:last #name').val('');

 return false;

EDIT2

nie mogłem sobie pomóc zresetować wszystkie listy rozwijane we wstawionym TR, możesz to zrobić

$("#mytable tbody>tr:last").each(function() {this.reset();});

Resztę zostawiam tobie!

Anonimowy użytkownik

Potwierdzenie od:

Oprócz powyższych odpowiedzi: prawdopodobnie będziesz musiał zmienić identyfikatory w nazwach/identyfikatorach elementów wejściowych (zwróć uwagę, że nie powinieneś mieć liczb w nazwach pól):

<input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>

Zrobiłem to, ustawiając domyślną zmienną globalną na 0:

var globalNewIndex = 0;

oraz w funkcji add po sklonowaniu i zrzuceniu wartości w nowej linii:

var newIndex = globalNewIndex+1;

 var changeIds = function(i, val) {

 return val.replace(globalNewIndex,newIndex);

 }

 $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );

 globalNewIndex++;

Anonimowy użytkownik

Potwierdzenie od:

Próbowałem czegoś takiego i działa świetnie;
to jest część html:

<table class="dd" width="100%" id="data">

<tr>

<td>Year</td>

<td>:</td>

<td><select name="year1" id="year1" >

<option value="2012">2012</option>

<option value="2011">2011</option>

</select></td>

<td>Month</td>

<td>:</td>

<td width="17%"><select name="month1" id="month1">

 <option value="1">January</option>

 <option value="2">February</option>

 <option value="3">March</option>

 <option value="4">April</option>

 <option value="5">May</option>

 <option value="6">June</option>

 <option value="7">July</option>

 <option value="8">August</option>

 <option value="9">September</option>

 <option value="10">October</option>

 <option value="11">November</option>

 <option value="12">December</option>

</select></td>

<td width="7%">Week</td>

<td width="3%">:</td>

<td width="17%"><select name="week1" id="week1" >

 <option value="1">1</option>

 <option value="2">2</option>

 <option value="3">3</option>

 <option value="4">4</option>

</select></td>

<td width="8%">&nbsp;</td>

<td colspan="2">&nbsp;</td>

</tr>

<tr>

<td>Actual</td>

<td>:</td>

<td width="17%"><input name="actual1" id="actual1" type="text"/></td>

<td width="7%">Max</td>

<td width="3%">:</td>

<td><input name="max1" id="max1" type="text"/></td>

<td>Target</td>

<td>:</td>

<td><input name="target1" id="target1" type="text"/></td>

</tr>

to jest część Javascript;

<script src="[url=http://code.jquery.com/jquery-latest.js"></script>]http://code.jquery.com/jquery- ... gt%3B[/url]

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

var currentItem = 1;

$('#addnew').click(function(){

currentItem++;

$('#items').val(currentItem);

var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text"/></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text"/></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text"/></td></tr>';

 $('#data').append(strToAdd); });

 });//]]>

 </script>

Na koniec PHP prześlij część:

for( $i = 1; $i <= $count; $i++ )

{

 $year = $_POST['year'.$i];

 $month = $_POST['month'.$i];

 $week = $_POST['week'.$i];

 $actual = $_POST['actual'.$i];

 $max = $_POST['max'.$i];

 $target = $_POST['target'.$i];

 $extreme = $_POST['extreme'.$i];

 $que = "insert INTO table_name(id,year,month,week,actual,max,target) VALUES ('".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."')";

 mysql_query($que);}

więcej szczegółów znajdziesz w

dynamiczne wstawianie wierszy tabeli
https://www.iranthajayasekara. ... .html

Anonimowy użytkownik

Potwierdzenie od:

Niesprawdzone.
Zmień zgodnie z wymaganiami:

$form = $('#my-form');$rows = $form.find('.person-input-row');$('button#add-new').click(function() { $rows.find(':first').clone().insertAfter($rows.find(':last')); $justInserted = $rows.find(':last');

 $justInserted.hide();

 $justInserted.find('input').val('');// it may copy values from first one

 $justInserted.slideDown(500);

});

Jest to lepsze niż kopiowanie innerHTML, ponieważ utracisz wszystkie dołączone zdarzenia itp.

Anonimowy użytkownik

Potwierdzenie od:

Na podstawie innych odpowiedzi nieco uprościłem sprawę. Klonując ostatni element otrzymujemy za darmo przycisk „dodaj nowy” (musisz zmienić ID na klasę ze względu na klonowanie), a także redukujemy operacje DOM. Musiałem użyć filter () zamiast find (), aby uzyskać tylko ostatni element.

$('.js-addNew').on('click', function(e) {

 e.preventDefault();

 var $rows = $('.person'),

 $last = $rows.filter(':last'),

 $newRow = $last.clone().insertAfter($last); $last.find($('.js-addNew')).remove();// remove old button

 $newRow.hide().find('input').val('');

 $newRow.slideDown(500);

});

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

Dynamiczne dodawanie wierszy za pomocą jQuery

5 odpowiedzi

Powiązane pytanie

Stan problemu

Dynamiczne dodawanie wierszy za pomocą jQuery

Linki dotyczące treści

5 odpowiedzi

Powiązane pytanie

Stan problemu