動態文本框代

Question

我想讓我的文本框的動態，目前我有4個文本框手動添加，但要每行中添加更多的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>

當我點擊AddRow按鈕時，我可以添加我的文本框（連續4個），但我想讓我的序列號在所有文本框上都對焦，而不僅僅是4個文本框，我該如何使onfocus =「SerialAutoComplete（this）」爲所有動態文本框？

Answer 1

。另外，你不想在之前添加新行這個按鈕嗎？

下面的代碼應該在最後一行之後添加一個新行，併爲文本輸入表單元素提供四個columsn。

此外，您可以用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)