Question

我已经找到了许多关于动态添加文本输入的答案，但我似乎无法找到命名输入的来源。例如，如果我在一行上有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");
          });
        });

Answer 1

请注意，您不能为多个标签使用相同的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;
          });

        });

Answer 2

通过将迭代器整数附加到名称上，你有了正确的想法，你需要对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];

添加多个输入并递增其名称

2 个答案: