如何创建表单输入框的id

How to create id of input box of form

本文关键字：输入 id 表单 何创建 创建      更新时间：2024-04-11

我有这个表格。

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

但是（有可能吗？）可以创建id的输入框吗？因为这些变量是"编号的"。例如，表单中的第一个id是inputp1_id，但我想要的数字使用how变量。有可能使用Javascript oJquery创建id？

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

创建后，输入文本具有id=inputp3_id

这里有一个关于如何使用jquery和javascript动态生成html内容的示例。这两种方法虽然看起来相似，但结果有点不同：jquery生成一个额外的<tbody>标记，而javascript将新行直接插入<table>。我建议您在Firefox的DOM Inspector中按Ctrl+Shift+I来检查结果。这是一个非常方便和有效的工具。下面是算法：

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

相关文章：