ダイナミックテキストボックス生成

Question

私は現在、私は4つのテキストボックスを手動で追加していますが、私は追加行ボタンを

function insertRow() { 
 
    var table = document.getElementById("createTable"); 
 
    var row = table.insertRow(table.rows.length); 
 
    
 
    var cell1 = row.insertCell(0); 
 
    var t1 = document.createElement("input"); 
 
    t1.id = "SERIAL1" + index; 
 
    cell1.appendChild(t1); 
 
    
 
    var cell2 = row.insertCell(1); 
 
    var t2 = document.createElement("input"); 
 
    t2.id = "SERIAL2" + index; 
 
    cell2.appendChild(t2); 
 
    
 
    var cell3 = row.insertCell(2); 
 
    var t3 = document.createElement("input"); 
 
    t3.id = "SERIAL3" + index; 
 
    cell3.appendChild(t3); 
 
    
 
    var cell4 = row.insertCell(3); 
 
    var t4 = document.createElement("input"); 
 
    t4.id = "SERIAL4" + index; 
 
    cell4.appendChild(t4); 
 

 
    index++; 
 
}

<div id="popSerialList" title="Edit Engine Group"> 
 
    <B>Group Name:</B>&nbsp;&nbsp;<input type="text" id="GROUPNAME" size="50" /> 
 
    <table cellpadding="10" id="createTable"> 
 
    <tr> 
 
     <td><input type="text" id="SERIAL1" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL2" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL3" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL4" onfocus="SerialAutoComplete(this)" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border:none;font-size:14px; padding:8px;">Add Users:</td> 
 
     <td colspan="3" style="border:none; padding:8px;"><select id="addUsers1" name="addUsers1" style="width:300px;" multiple="multiple" style=font-size:14px;></select>&nbsp;&nbsp;<input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow()" /></td> 
 
    </tr> 
 
    </table> 
 
</div>

をクリックすると、各行により4つのボックスを追加したい、私のテキストボックスを動的にしたいです

AddRowボタンをクリックすると、テキストボックス（4行）を追加できますが、4つのテキストボックスだけでなく、すべてのテキストボックスでシリアル番号onfocusを取得したいonfocus = "すべてのダイナミックテキストボックスの" SerialAutoComplete（this） "？

Answer 1

を使用することができます。また、の前に新しい行を追加したくない場合は、ボタンを押しますか？

次の例は、最後の行の後に新しい行を追加し、4つの列にテキスト入力フォーム要素を指定する必要があります。

また、 文字をCSSの余白に置き換えることもできます。

// Set the count to the current number of cells OR one. 
 
var cellIndex = document.querySelectorAll('td>input[id^="SERIAL"]').length || 1; 
 
var numOfCols = 4; 
 

 
function insertRow() { 
 
    var table = document.getElementById('createTable'); 
 
    var row = table.insertRow(table.rows.length - 1); 
 

 
    for (var colIndex = 0; colIndex < numOfCols; colIndex++) { 
 
    var cell = row.insertCell(0); 
 
    var input = document.createElement('input'); 
 

 
    input.setAttribute('type', 'text'); 
 
    input.id = "SERIAL" + cellIndex; 
 
    input.addEventListener('focus', function(e) { 
 
     return SerialAutoComplete(this); 
 
    }); 
 
    cell.appendChild(input); 
 
    
 
    cellIndex++; 
 
    } 
 
} 
 

 
function SerialAutoComplete(self) { 
 
    console.log(self); 
 
}

table tr:last-child td:nth-child(2) { 
 
    border: none; 
 
    padding: 8px; 
 
} 
 

 
.add-users { 
 
    border: none; 
 
    font-size: 14px; 
 
    padding: 8px; 
 
} 
 

 
#addUsers1 { 
 
    width: 300px; 
 
    font-size: 14px; 
 
} 
 

 
#popSerialList>B, 
 
#addUsers1 { 
 
    margin-right: 0.25em; 
 
}

<div id="popSerialList" title="Edit Engine Group"> 
 
    <B>Group Name:</B> <input type="text" id="GROUPNAME" size="50" /> 
 
    <table cellpadding="10" id="createTable"> 
 
    <tr> 
 
     <td><input type="text" id="SERIAL1" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL2" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL3" onfocus="SerialAutoComplete(this)" /></td> 
 
     <td><input type="text" id="SERIAL4" onfocus="SerialAutoComplete(this)" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="add-users">Add Users:</td> 
 
     <td colspan="3"> 
 
     <select id="addUsers1" name="addUsers1" multiple="multiple"></select> 
 
     <input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow()" /></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

あなたがそれぞれの新しい行のための細胞を作成するためにループを使用していないのはなぜあなたはelement.addEventListener(event, function)