javascript - 删除修改数据的表行

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 <<忘记了右方括号 att，现已修复

$('.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+']');
    });
}

<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>