javascript - jquery 递增索引输入数组

Question

我正在尝试增加隐藏输入的值并增加输入名称的索引。 我找到了增加索引的解决方案，但是我不知道如何增加隐藏输入的值。

这是我的 HTML

<table class='table-results'>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>
            <input name="result[1][key]" type="hidden" value="A">
            <input placeholder="Title*" class="form-control result-title" name="result[1][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[1][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>
</table>

还有 JS

$('.table-results').on('click', '.add-question',function(event){

  event.preventDefault();
  var selector = $(this).closest('tr').find("input[type=hidden]").attr('name');
  var index_value = selector.match(/\d+/)[0];

  var nextIndexValue = parseInt(index_value,10)+1;

  var thisRow = $(this).closest('tr'); 
  $(thisRow).clone().insertAfter(thisRow).find('input, textarea').each(function(){
                                                            this.name = this.name.replace(selector.match(/\d+/)[0],nextIndexValue)
                                                        })
});

预期:

<table class='table-results'>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>
            <input name="result[1][key]" type="hidden" value="A">
            <input placeholder="Title*" class="form-control result-title" name="result[1][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[1][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>

    <tr>
        <td>
            <input name="result[2][key]" type="hidden" value="B">
            <input placeholder="Title*" class="form-control result-title" name="result[2][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[2][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>

</table>

Jsfiddle

https://jsfiddle.net/st0yxcLs/

Answer 1

为了更新隐藏的输入值。您需要使用Javascript字符代码。 http://www.cambiaresearch.com/articles/15/javascript-key-codes

var charCode = 65;
$('.table-results').on('click', '.add-question',function(event){

  event.preventDefault();
  var selector = $(this).closest('tr').find("input[type=hidden]").attr('name');
  var index_value = selector.match(/\d+/)[0];

  var nextIndexValue = parseInt(index_value,10)+1;

  var thisRow = $(this).closest('tr'); 
  var newRow = $(thisRow).clone().insertAfter(thisRow).find('input, textarea').each(function(){
      this.name = this.name.replace(selector.match(/\d+/)[0],nextIndexValue)
  })

  var value = parseInt(index_value) + charCode;
  $(newRow).closest('tr').find("input[type=hidden]").attr('value', String.fromCharCode(value));

});

在这里工作 JSFiddle。 https://jsfiddle.net/8xm1qh2t/

我想这就是您正在寻找的。

干杯!