Создать новый элемент в цикле

Question

У меня возникла серьезная проблема: я хочу добавить некоторые данные в строку таблицы на конкретном td, добавив несколько элементов ввода с помощью ajax. Я также могу это сделать, но моя проблема в том, что когда у меня есть несколько строк в таблице, и я добавляю элемент, который он добавляет в первую строку таблицы, но я хочу добавить к этой строке только здесь, что я пытаюсь сделать.

код я использую для этого

<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, чтобы показать то, что я пытаюсь сделать. благодаря

Answer 1

в HTML:

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

в JavaScript:

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

Answer 2

Проблема в коде является то, что вы можете иметь только один из идентификатора на странице. Когда у вас более одного JavaScript, он всегда занимает первое место.

Когда вы используете jQuery listner, вы можете использовать родительскую функцию, чтобы получить td, в который вы хотите добавить вход. Вам даже не нужна переменная счетчика, потому что, когда вы используете селектор jQuery, вы можете получить число этот элемент непосредственно из jQuery.

Вы можете использовать что-то вроде кода ниже.

В HTML использования

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

В Javascript использовать

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