سؤال

أنا أقوم ببناء نموذج حيث أحتاج إلى مدخلات اختيارية متعددة ، ما لدي هو في الأساس:

form example

في كل مرة يضغط المستخدم على زر الإضافة ، يجب إضافة صف جديد من مدخلات النموذج إلى النموذج ، كيف يمكنني القيام بذلك في jQuery؟ أيضًا ، هل من الممكن إضافة صف جديد تلقائيًا عندما يكون جميع الصفوف (أو فقط الصف الأخير ، إذا كان أسهل / أسرع) ممتلئة ب؟ وبهذه الطريقة ، لن يحتاج المستخدم إلى الضغط على الزر Plus.

أنا آسف لطرح هذا السؤال الأساسي ، لكنني ما زلت أخضر جدًا مع jQuery ، يمكنني القيام بذلك مع PHP ، لكنني متأكد من أن JavaScript / JQuery تلعب دورًا أكثر ملاءمة هنا.

شكرا لك مقدما!


@alex:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<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><a href="#" id="add">+</a></td>
    </tr>
  </table>
</form>
</body>
</html>
هل كانت مفيدة؟

المحلول

سيغلقك هذا ، تمت إزالة زر الإضافة خارج الجدول ، لذا قد ترغب في التفكير في ذلك ...

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
          return false;
        });
    });
</script>

يبدو أن علامة HTML مثل هذا

  <a  id="add">+</a></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>

تعديل لتفريغ قيمة مربع النص بعد الإدراج ..

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

EDIT2 لم أستطع مساعدة نفسي ، لإعادة تعيين جميع قوائم القائمة المنسدلة في TR المدرجة يمكنك القيام بذلك

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

سأترك الباقي لك!

نصائح أخرى

كإضافة إلى الإجابات أعلاه: ربما تحتاج إلى تغيير معرفات في أسماء/معرفات عناصر الإدخال (PLS ملاحظة ، يجب ألا يكون لديك أرقام في اسم الحقول):

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

لقد فعلت هذا مع وجود بعض المتغيرات العالمية بشكل افتراضي إلى 0:

var globalNewIndex = 0;

وفي وظيفة إضافة بعد استنساخ وإعادة تعيين القيم في الصف الجديد:

                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++;

لقد جربت شيئًا كهذا وأعماله بشكل جيد ؛

enter image description here

هذا هو الجزء 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>

هذا هو جزء JavaScript ؛

<script src="http://code.jquery.com/jquery-latest.js"></script>
<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>

Finaly php إرسال جزء:

    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);

}

يمكنك العثور على مزيد من التفاصيل عبر دخول صف الجدول الديناميكي

لم يخبر. تعديل لتناسب:

$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);


});

هذا أفضل من نسخ innerhtml لأنك ستفقد جميع الأحداث المرفقة وما إلى ذلك.

بناء على الإجابات الأخرى ، قمت بتبسيط الأشياء قليلاً. من خلال استنساخ العنصر الأخير ، نحصل على زر "إضافة جديد" مجانًا (يجب عليك تغيير المعرف إلى فئة بسبب الاستنساخ) وأيضًا تقليل عمليات DOM. اضطررت إلى استخدام Filter () بدلاً من Find () للحصول على العنصر الأخير فقط.

$('.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);
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top