dynamische Textfelder Generation

Question

Ich möchte meine Textfelder dynamisch machen, zur Zeit habe ich vier Textfelder manuell hinzugefügt wollen, aber mehr 4 Boxen in jeder Zeile hinzufügen, wenn ich auf Zeile hinzufügen klicken

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>

Wenn ich auf die AddRow-Schaltfläche klicke, kann ich meine Textfelder (4 in einer Reihe) hinzufügen, aber ich möchte meine Seriennummern auf alle Textfelder und nicht nur für 4 Textfelder bekommen, wie kann ich machen onfocus = "SerialAutoComplete (this)" für alle dynamischen Textfelder?

Answer 1

verwenden Warum nicht eine Schleife erstellt die Zellen für jede neue Zeile verwenden. Wollen Sie auch nicht die neue Zeile vor die Schaltfläche hinzufügen?

Folgendes sollte eine neue Zeile nach der letzten Zeile hinzufügen und vier Spalten mit Texteingabeformularelementen bereitstellen.

Sie können die   Zeichen auch durch CSS-Ränder ersetzen.

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

können Sie element.addEventListener(event, function)