Génération de fichiers dynamiques Jquery

Question

Dans le code suivant .Comment puis-je générer dynamiquement des zones de texte sous les boutons Ajouter et Supprimer de l'affichage sous l'en-tête Détails du travail.

jsfiddle

HTML:

<table border="0" cellspacing="2"> 
    <tr> 
     <td style="width:200px;" align="right">Name 
      <td> 
       <input type="text" id="Job Name" value="" /> 
      </td> 
     </td> 
    </tr> 
    <tr> 
     <td align="right">Versions</td> 
     <td> 
      <select id="version" style="width:350px;"> 
       <option value="">SELECT</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td align="right">Test Scripts</td> 
     <td> 
      <select id="testscripts" style="width:350px;"></select> 
     </td> 
    </tr> 
    <tr> 
     <td align="right">datas</td> 
     <td> 
      <input type="button" id="add" value="Add" onclick="AddTables();" /> 
      <input type="button" id="del" value="Del" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:3px" colspan="2"></td> 
    </tr> 
    <tr style="background-color: #383838"> 
     <td></td> 
     <td> 
      <input type="button" id="adde" value="New" onclick="clearData();" />&nbsp;&nbsp; 
      <input type="button" id="edit" value="Save" onclick="saveToDB();" 
      />&nbsp;&nbsp; 
      <input type="button" id="delete" value="Delete" onclick="deleteData();" 
      /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
       <h2>Job Details</h2> 

      <div id="navcont" style="width: 880px; height: 5px; margin-left: 0px; margin-top: 0px; list-style: none; float: left;background-color: #383838"></div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <!-- TODO:change this as div, create table inside helper script--> 
      <div id="jobsTable"></div> 
      </div> 
      </div> 
     </td> 
    </tr> 
</table> 

JQuery:

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length < 7) { 
     table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
    } 
}); 
$('#del').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length > 1) { 
     table.find('input:text').last().closest('tr').remove(); 
    } 
}); 

Answer 1

DEMO

essayer ce code

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length < 7) { 
     $('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>').insertAfter($(this).closest('tr')); 
    } 
}); 

Answer 2

Vous pouvez donner à l'ID <td align="right">datas</td> et que append HTML à elle. Effectuez la mise en forme pour l'affichage. Chose que vous utilisez ajouter correctement sur n'importe quel élément html, de sorte qu'il ajoute où vous voulez.

Answer 3

Vous pouvez utiliser la technique suivante

$('#add').click(function() { 
    var tr = $(this).closest('tr'); 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length < 7) { 
     tr.after('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
    } 
}); 

avis, je pris le parent tr des boutons et l'a utilisé comme point de référence pour ajouter tr juste à côté au lieu d'ajouter à la fin du tableau.

Answer 4

essayer cette

var table = $(this).closest('table'); 
if (table.find('input:text').length < 7) { 
    table.find('tr:last').after('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" value="" /> </td></tr>'); 
} 

aussi, je pense qu'il est pas juste de donner à chaque entrée le même identifiant de