루프에서 새 요소 만들기

아약스의 도움으로 여러 입력 요소를 추가하여 특정 td의 테이블 행에 일부 데이터를 추가하려고합니다. 나는 또한 그 일을 할 수 있지만 내 문제는 내가 테이블에 여러 행을 가지고 내가 테이블의 첫 번째 행에 추가 요소를 추가하지만 그 행에만 여기에 무엇을하려고하는지 추가하고 싶습니다. enter image description here 루프에서 새 요소 만들기

이

<script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
<script type="text/javascript"> 
var counter = 1; 
function dep() 
{ 
    if(counter>9){ 
     alert("Only 10 textboxes allow"); 
     return false; 
    } 
    var newTextBoxDiv = jQuery(document.createElement('div')) 
     .attr("id", 'dependent' + counter); 
    newTextBoxDiv.after().html('<input type="text" class="form-control" name="checklistname[]' + counter + '" placeholder="Add Checklist" required>'); 
    newTextBoxDiv.appendTo("#dependent"); 
    counter++; 
} 
function depdel() 
{ 
    if(counter==1){ 
     alert("No more textbox to remove"); 
     return false; 
    } 
    counter--; 
    jQuery("#dependent" + counter).remove(); 
} 
</script> 
<table> 
    <thead> 
     <tr class="myrows"> 
      <th>Project </th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tr> 
     <?php for($i=0;$i<=2;$i++) { ?> 
      <td>my project<?php echo $i;?></td> 
      <td> <form action="" method="post" id="form"> 
       <div id="dependent" class="newclass"> 
       </div> 
       <input type="submit" id="mybutton" value="Save" title="Save"> 
       <a href="#" class="action" title="Add" onClick="dep();"> Add </a> 
       <a href="#" class="action" title="Delete" onClick="depdel();">delete </a> 
      </td> 
     <?php }?> 
    </tr> 
</table>

친절하게 스크린 샷을 확인하고 HTML 내가 할 노력하고있어 보여주는 것입니다 위해 내가 사용하고 코드. HTML에 감사

출처

2015-01-23 Ramesh Singh

: 자바 스크립트

<a href="#" class="action" title="Add" onClick="dep(this);"> Add </a>

는 :

var counter = 1; 
function dep(obj) 
{ 
    var myDependent= $(obj).closest('tr').find("#dependent"); 
if(counter>9){ 
alert("Only 10 textboxes allow"); 
return false; 
} 
var newTextBoxDiv = jQuery(document.createElement('div')) 
.attr("id", 'dependent' + counter); 
newTextBoxDiv.html('<input type="text" class="form-control" name="checklistname[]' + counter + '" placeholder="Add Checklist" required>'); 
newTextBoxDiv.appendTo(myDependent); 
counter++; 
}

출처

2015-01-23 12:23:38 Vijay

그것의 매력에 감사 비제이처럼 작동을 사용 –

코드에서 문제는 당신 만 페이지에 ID 중 하나를 가질 수 있다는 것입니다. JavaScript가 여러 개있을 때는 항상 첫 번째 JavaScript를 사용합니다.

jQuery listner를 사용할 때 부모 함수를 사용하여 입력을 추가 할 수 있습니다. 카운터 변수가 필요하지 않습니다. jQuery 선택기를 사용할 때 숫자를 가져올 수 있기 때문입니다. 그 항목은 jQuery에서 직접 가져온다.

아래 코드와 같은 것을 사용할 수 있습니다. HTML 사용에

자바 스크립트에서

<a href="#" class="action add" title="Add"> Add </a> 
<a href="#" class="action depdel" title="Delete" >delete </a>

는

jQuery(document).ready(function() { 
    jQuery('.add').click(function() { 
     if (jQuery('.dependent', $(this).parent()).length > 9) { 
      alert("Only 10 textboxes allow"); 
      return false; 
     } 
     jQuery('#dependent', $(this).parent()).append('<div class="dependent"><input type="text" class="form-control" name="checklistname[]" placeholder="Add Checklist" required></div>'); 

    }) 
    jQuery('.depdel').click(function() { 

     if (jQuery('.dependent', $(this).parent()).length == 0) { 
      alert("No more textbox to remove"); 
      return false; 
     } 
     jQuery(" .dependent", $(this).parent()).last().remove(); 
    }) 
})

출처

2015-01-23 12:42:36

루프에서 새 요소 만들기

답변

관련 문제