添加多个输入并增加它们的名称

Adding multiple inputs and incrementing their names

本文关键字：增加 输入 添加      更新时间：2023-09-26

我已经找到了许多关于动态添加文本输入的答案，但我似乎找不到命名输入的来源。例如，如果我在一行上有3个输入，并且用户添加了另一行，那么我需要输出如下:

name_1 text_1 subject_1

name_2 text_2 subject_2

下面是我到目前为止的内容，这里是我的codepen的链接

    <table id="speedTable">
  <tr>
    <td colspan="3">
      <a href="" id="add-button">
        <img width="16" height="16" title="Click here to add a time entry." alt="Click here to add a time entry." src="/images/add.png">
      </a>
    </td>
  </tr>
  <tbody>
    <tr>
      <td>
        <label style="position:relative;" for="start_run_length">Start Run Length</label>
        <input style="" type="text" id="start_run_length" name="start_run_length_0">
      </td>
      <td>
        <label style="position:relative;" for="end_run_length">End Run Length</label>
        <input style="" type="text" id="end_run_length" name="end_run_length_0">
      </td>
      <td>
        <label style="position:relative;" for="impressions_per_hr">Speed-Impressions/hr</label>
        <input style="" type="text" id="impressions_per_hr" name="impressions_per_hr_0">
      </td>
    </tr>
  </tbody>
</table>

JS: 

$(function() {
      var scntDiv = $('#speedTable');
      var i = $('#speedTable tbody').size() + 1;
      $('#add-button').on('click', function() {
        $('<tr><td><label style="position:relative;" for="start_run_length">Start Run Length</label><input style="" type="text" id="start_run_length1" name="start_run_length' + i + '"/></td><td><label style="position:relative;" for="end_run_length">End Run Length</label><input style="" type="text" id="end_run_length" name="end_run_length' + i + '"></td><td><label style="position:relative;" for="impressions_per_hr">Speed-Impressions/hr</label><input style="" type="text" id="impressions_per_hr" name="impressions_per_hr' + i + '"></td></tr>').appendTo(scntDiv);
        i++;
        return false;
      });
    });

编辑解决方案和参考:

$(function() {
var idx = 0;
var scntDiv = $('#speedTable');
var htmlContent1a = '<tr><td><label style="position:relative;">Start Run Length</label><input style="" type="text" class="selector" id="start_run_length';
var htmlContent1b = '" name="start_run_length';
var htmlContent2a = '"></td><td><label style="position:relative;">End Run Length</label><input style="" type="text" class="selector" id="end_run_length';
var htmlContent2b = '" name="end_run_length';
var htmlContent3a = '"></td><td><label style="position:relative;">Speed-Impressions/hr</label><input style="" type="text" class="selector" id="impressions_per_hr';
var htmlContent3b = '" name="impressions_per_hr';
var htmlContent3c = '"></td></tr>';
          $('#add-button').on('click', function() {
            //increment an index
            idx++;
            var newContent = htmlContent1a + idx + htmlContent1b + idx + htmlContent2a + idx + htmlContent2b + idx + htmlContent3a + idx + htmlContent3b + idx + htmlContent3c;
              $(newContent).appendTo("#tableBody");
          });
        });

您通过将迭代器整数添加到名称中得到了正确的想法，您需要对id属性执行相同的操作。

一个更好的方法是使用一个数组作为名称。

name='whatever[]'

. .这样你就不用担心追加数字了。

但这产生了不能将每个输入与同一行上的其他输入相关联的问题。我经常添加一个data-index属性来帮助解决这个问题。

对您正在创建的每个输入动态添加一个data-index="'+i+'"参数，然后您可以使用一个jquery选择器获得整个行。

var row = $("input[data-index='1']"); // returns all rows in the 2nd column
startInput = row[0];
endInput = row[1];
theOtherInput = row[2];

注意，不能对多个标记使用相同的id。我把id改为类。

 $(function() {
          var scntDiv = $('#speedTable');
          $('#add-button').on('click', function() {
            var i = $('#speedTable tbody').size() + 1;
            $('<tr><td><label style="position:relative;" for="start_run_length">Start Run Length</label><input style="" type="text" class="start_run_length" name="start_run_length' + i + '"/></td><td><label style="position:relative;" for="end_run_length">End Run Length</label><input style="" type="text" class="end_run_length" name="end_run_length' + i + '"></td><td><label style="position:relative;" for="impressions_per_hr">Speed-Impressions/hr</label><input style="" type="text" class="impressions_per_hr" name="impressions_per_hr' + i + '"></td></tr>').appendTo(scntDiv);
            return false;
          });
        });
相关文章：