Question

表单包含许多行的表。用户可以单击按钮删除行。

        <tr class="fes-single-variation">
            <td class="fes-name-row">
                <input class="fes-name-value" name="option[0][description]" id="options[0][description]" rows="3" value="" type="text">
            </td>
        </tr>
        <tr class="fes-single-variation">
            <td class="fes-name-row">
                <input class="fes-name-value" name="option[1][description]" id="options[1][description]" rows="3" value="" type="text">
            </td>
        </tr>
        <tr class="fes-single-variation">
            <td class="fes-name-row">
                <input class="fes-name-value" name="option[2][description]" id="options[2][description]" rows="3" value="" type="text">
            </td>
        </tr>
        <tr class="fes-single-variation">
            <td class="fes-name-row">
                <input class="fes-name-value" name="option[3][description]" id="options[3][description]" rows="3" value="" type="text">
            </td>
        </tr>

让我们说用户想要删除第二行

        <tr class="fes-single-variation">
            <td class="fes-name-row">
                <input class="fes-name-value" name="option[1][description]" id="options[1][description]" rows="3" value="" type="text">
            </td>
        </tr>

然后用户提交表单，以便在提交表单之前需要更新许多值，例如：

name="option[2][description]应为name="option[1][description]

name="option[3][description]应为name="option[2][description]

我如何使用jQuery来管理这些更新？ jQuery是否有某种内置函数来处理这个问题？

感谢

Answer 1

如果我理解你的问题，我认为这就是你所问的问题：

JS Fiddle-updated＆lt;＆lt; 忘记了 att中的右方括号，现在已修复

＆＃13;

$('.btn').on('click', function(){
    // On each button click event we delete the parent tr
    // then we call a function to update the input fields
    $(this).parents('tr').remove();
    updateRows();
});

function updateRows(){
    // here we select all inputs text fields in tr which 
    // have .fes-single-variation class and update their
    // name and id attributes according to the index value
    $('tr.fes-single-variation td input[type="text"]').each(function(index){
        var att = 'option[' +index+ '][description]';
        $(this).attr('id',att).attr('name', att);
      
        //the below line is just for demo purpose
        //not part of solution
        $(this).val('option['+index+']');
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="fes-single-variation">
    <td class="fes-name-row">
      <input class="fes-name-value" name="option[0][description]" id="options[0][description]" rows="3" value="option[0]" type="text">
    </td>
    <td>
      <button class="btn">Delete</button>
    </td>
  </tr>
  <tr class="fes-single-variation">
    <td class="fes-name-row">
      <input class="fes-name-value" name="option[1][description]" id="options[1][description]" rows="3" value="option[1]" type="text">
    </td>
    <td>
      <button class="btn">Delete</button>
    </td>
  </tr>
  <tr class="fes-single-variation">
    <td class="fes-name-row">
      <input class="fes-name-value" name="option[2][description]" id="options[2][description]" rows="3" value="option[2]" type="text">
    </td>
    <td>
      <button class="btn">Delete</button>
    </td>
  </tr>
  <tr class="fes-single-variation">
    <td class="fes-name-row">
      <input class="fes-name-value" name="option[3][description]" id="options[3][description]" rows="3" value="option[3]" type="text">
    </td>
    <td>
      <button class="btn">Delete</button>
    </td>
  </tr>
</table>

＆＃13;

删除包含修改数据的表行

1 个答案: