动态文本框生成

Question

我想让我的文本框动态化，目前我手动添加了4个文本框但是当我点击添加行按钮时想要在每行中添加更多4个框

＆＃13;

＆＃13;

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++;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我点击AddRow按钮时，我可以添加我的文本框（连续4个），但我希望在所有文本框上获取我的序列号，而不仅仅是4个文本框，我该如何进行onfocus =＆＃34; SerialAutoComplete（本）＆＃34;对于所有动态文本框？

Answer 1

您可以使用element.addEventListener(event, function)

Answer 2

为什么不使用循环为每个新行创建单元格。另外，您不想在按钮之前添加新行吗？

以下内容应在最后一行之后添加一个新行，并为文本输入表单元素提供四个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>