Comment créer l'ID de la zone de saisie du formulaire

Question

J'ai ce formulaire.

<table><tr><td> 
<FORM> 
<label> ID </label></td> 
<td> 
<input type=text id="inputp1_id" size=24 class="text"> 
</td></tr> 
<tr><td> 
    <label>Type</label></td><td><select id="inputp1_type" name="inputp1_type"><option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option><option value="list_values">List of values</option> 
<option value="range">Range</option><option value="selection_collapsed">Selection (collapsed)</option><option value="selection_expanded">Selection (expanded)</option><option value="subimage">Subimage selection</option> 
<option value="polygon">Polygon selection</option><option value="horizontal_separator">Horizontal separator</option></select> 
</td></tr> 
<tr><td> <label > Description</label></td> <td><input type=text id="inputpi_description" size=24 class="text"> </td><!--style=" width:300px; height:20px;"--> 
</tr> 
    <tr><td>  <label>Value</label></td><td> <input type="text" name="inputp1_value" id="inputp1_value" class="text" size=24></td></tr> 
    <tr><td> <label > Info (help)</label></td><td> 
    <input type=text id="input1_value" size=24 class="text"></td></tr> 
    <tr><td><label > Visible?</label></td><td><input type="checkbox" name="inputp1_visible" id="inputp1_visible"></td></tr></table> 
     <!--</form>--></div> 

Mais (c'est possible?) Peut créer le champ d'entrée de l'ID? Parce que les variables sont "numérotées". Par exemple, le premier identifiant du formulaire est inputp1_id mais le nombre que je veux utiliser est variable. Il est possible de créer l'ID avec le Javascript o Jquery?

l=3 
Id='inputp' +l+'_id' 

Après cela, créer le texte d'entrée a le id=inputp3_id

Answer 1

Voici un exemple sur la façon de générer du contenu HTML dynamique avec jquery et javascript. Les deux méthodes, même si elles semblent similaires, donnent des résultats un peu différents: jquery génère une étiquette supplémentaire <tbody>, tandis que javascript insère directement les nouvelles lignes à <table>. Je vous recommande d'inspecter le résultat dans le DOM Inspector de Firefox en appuyant sur Ctrl + Shift + I. C'est un outil très pratique et efficace. Et voici le algorythme:

var i=0; // this is simple counter 

function generate_row_dynamically_in_jquery() { 
    i++; 
    var new_row = $('<tr/>'); 
    var new_cell1 = $('<td>ID <input type="text" name="inputp'+i+'_id" id="inputp'+i+'_id" size="24" class="text"/></td>'); 
    var new_cell2 = $('<td>Visible? <input type="checkbox" name="inputp'+i+'_visible" id="inputp'+i+'_visible"> </td>'); 
    new_row.append(new_cell1).append(new_cell2); 
    $('#table1').append(new_row); 
} 

function generate_row_dynamically_in_javascript() { 
    i++; 
    var new_row = document.createElement('tr'); 
    var new_cell1 = document.createElement('td'); 
    new_cell1.innerHTML = 'ID <input type="text" name="inputp'+i+'_id" id="inputp'+i+'_id" size="24" class="text"/>'; 
    var new_cell2 = document.createElement('td'); 
    new_cell2.innerHTML = ' Visible? <input type="checkbox" name="inputp'+i+'_visible" id="inputp'+i+'_visible">'; 
    new_row.appendChild(new_cell1); 
    new_row.appendChild(new_cell2); 
    document.getElementById('table1').appendChild(new_row); 
} 

& @jsfiddle