Question

我是UI设计和jquery的初学者。我试图使用jquery增加输入名称数组索引。我有一个添加按钮，单击它会添加另一行。但是该行的名称应具有输入数组索引值递增的名称。

在这里，当我们单击 Add 按钮时，我需要paramKey[]和paramValue[]索引值增加。

我写的脚本：

var i = 1;
$(document).ready(function() {
  $(".addCF").click(function() {
    i++;
    $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey[i]" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue[i]" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName">Params</label></td>
    <td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[0]" placeholder="Param Name" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[0]" value="" placeholder="Param Value" /> &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

提前谢谢！

Answer 1

您将始终附加硬编码值，因此，当您i正确增加时，输出将相同

 $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey['+i+']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue['+i+']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');

}）;

在这里，我在代码中添加了i作为变量，请替换代码中的这一行

Answer 2

之所以无法获得paramKey[]和paramValue[]的递增数组索引值，是因为您没有正确地附加变量i。

尝试以下代码：

 <script>
   var i = 1;
    $(document).ready(function() {
      $(".addCF").click(function() {
        i++;
        $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey['+i+']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue['+i+']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
      });
      $("#paramsFields").on('click', '.remCF', function() {
        $(this).parent().parent().remove();
      });
    });
</script>

Answer 3

您首先使用html代码（例如select t.date, t.time as starttime, lead(t.time) over (order by t.date, t.time) as endtime, (lead(EnergyKWH) over (order by t.date, t.time) - EnergyKWH ) as EnergyKWH_diff from t where datepart(minute, time) = 0 order by t.date, t.time;）输入索引。在javascript代码中，您从1 name="paramKey[0]"开始索引，但是在添加新输入之前，应增加索引var i = 1，这应该在输入出现之后，并且索引变量“ i”的值应该在输入名称中打印属性i++。而且ID必须是唯一的，因此我也在ID名称上添加了索引值。

我更改了您的代码，并希望了解所做的更改。

name="paramKey[' + i + ']"

var i = 1;
$(document).ready(function() {
  $(".addCF").click(function() {
    $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName' + i + '" name="paramKey[' + i + ']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue' + i + '" name="paramValue[' + i + ']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    i++;
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

Answer 4

为简化这一点，我将做以下事情：

通过创建新数据的模板（使用CSS隐藏）将HTML保留在HTML中，
使用占位符（占位符，由您的数字代替）
单击该按钮，克隆，替换占位符并追加此模板。

有效代码段（有关详细信息，请参见评论）：

var i = 0; // Start at 0
$(document).ready(function() {
  $(".addCF").click(function() {
    i++;
    var newRow = $("#template").clone().removeAttr("hidden").removeAttr("aria-hidden"); // Clone template and make it visible
    $(newRow).html(newRow.html().replace(/%/g, i)); // Replace the % by the i number
    $("#paramsFields").append(newRow);
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName">Params</label></td>
    <td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[0]" placeholder="Param Name" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[0]" value="" placeholder="Param Value" /> &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>

  <tr id="template" valign="top" hidden="true" aria-hidden="true">
    <td></td>
    <td>
      <input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[%]" value="" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[%]" value="" /> &nbsp;
      <a href="javascript:void(0);" class="remCF">Remove</a>
    </td>
  </tr>

</table>

注意：所有样式都应使用CSS。

使用Jquery递增输入名称数组索引

4 个答案: