IT박스

jQuery를 사용하여 동적으로 행 추가

itboxs 2020. 12. 9. 07:59
반응형

jQuery를 사용하여 동적으로 행 추가

여러 선택적 입력이 필요한 양식을 작성 중입니다. 기본적으로 다음과 같습니다.

양식 예

사용자가 더하기 버튼을 누를 때마다 새로운 양식 입력 행이 양식에 추가되어야합니다. jQuery에서 어떻게 할 수 있습니까? 또한 모든 행 (또는 더 쉽고 빠르면 마지막 행만) 이 채워 지면 새 행을 자동으로 추가 할 수 있습니까? 이렇게하면 사용자가 더하기 버튼을 누를 필요가 없습니다.

그런 기본적인 질문을해서 미안하지만 여전히 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();});

나머지는 당신에게 맡기겠습니다!

위의 답변에 추가로 : 입력 요소의 이름 / ID에서 ID를 변경해야 할 수 있습니다 (필드 이름에 숫자가 없어야 함). 

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

기본적으로 0으로 설정된 전역 변수가 있습니다.

var globalNewIndex = 0;

새 행의 값을 복제하고 재설정 한 후 add 함수에서 :

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

나는 이것과 같은 것을 시도했고 그 작동은 잘했다.

여기에 이미지 설명 입력

이것은 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>

이것은 자바 스크립트 부분입니다.

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

최종 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을 복사하는 것보다 낫습니다.

다른 답변을 바탕으로 약간 단순화했습니다. 마지막 요소를 복제하면 "새로 추가"버튼이 무료로 제공되고 (복제 때문에 ID를 클래스로 변경해야 함) DOM 작업도 줄입니다. 마지막 요소 만 가져 오려면 find () 대신 filter ()를 사용해야했습니다.

$('.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);
});

참고 URL : https://stackoverflow.com/questions/2145012/adding-rows-dynamically-with-jquery

반응형

'IT박스' 카테고리의 다른 글

Laravel에서 요청 매개 변수의 값을 변경하는 방법  (0) 2020.12.10
신뢰할 수있는 연결이란 무엇입니까?  (0) 2020.12.09
rails 부울 필드 :`is_foo` 또는 그냥`foo`?  (0) 2020.12.09
{key : key, value : value,…} 대신 {key : value,…}로 사전을 C # JSON 직렬화  (0) 2020.12.09
고정 된 비활성 msbuild.exe 프로세스, 잠긴 Stylecop.dll, Nuget AccessViolationException 및 CI 빌드가 서로 충돌하는 수수께끼  (0) 2020.12.09

'IT박스'의 다른글

  • 현재글jQuery를 사용하여 동적으로 행 추가

관련글

댓글

티스토리툴바