Question

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script language="javascript" >

$(document).ready(function() {

    $('img.deleterow').live('click', function() {

        $(this).parent().parent().remove();
    });


    $('img.deletecolumn').live('click', function() {

        var colIndex = $(this).closest("td").prevAll("td").length;

        $(this).parents("table").find("tr").each(function(){

            $(this).find("td:eq("+colIndex+")").remove();
        });

    });

})

</script>

</head>
<body>

最初，表被动态加载，每个单元格的矩阵将按照顺序正确。

    Example,
    start from first row first cell is input id/name= 0_0, 0_1, 0_2....
    start from second row first cell is input id/name= 1_0, 1_1, 1_2....

当我点击保存按钮发布到服务器端时，所有单元格值都需要按顺序排列，以便我可以通过循环序列检索它。

现在问题是当我使用删除行和删除列功能时，它会搞砸最初创建的输入id =“0_1”name =“0_1” id / name不再遵循数字序列，它将有跳数。

有没有办法重新生成矩阵序列并重新分配以覆盖输入字段的id和name属性，同时保留其中的现有值？

    <table border="1">
        <tbody>
            <tr>
                <td>
                <input type="text" name="caption" placeholder="Eg: Some text"></td>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
                <td>F</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Head 1<input type="hidden" name="rowvalue" value="Head 1"></td>
                <td><input id="0_0" type="text" name="0_0" value="row 0 col 0"></td>
                <td><input id="0_1" type="text" name="0_1" value="row 0 col 1"></td>
                <td><input id="0_2" type="text" name="0_2" value="row 0 col 2"></td>
                <td><input id="0_3" type="text" name="0_3" value="row 0 col 3"></td>
                <td><input id="0_4" type="text" name="0_4" value="row 0 col 4"></td>
                <td><input id="0_5" type="text" name="0_5" value="row 0 col 5"></td>
                <td><img class="deleterow" src="minus.png"></td>
            </tr>
            <tr>
                <td>Head 2<input type="hidden" name="rowvalue" value="Head 2"></td>
                <td><input id="1_0" type="text" name="1_0" value="row 1 col 0"></td>
                <td><input id="1_1" type="text" name="1_1" value="row 1 col 1"></td>
                <td><input id="1_2" type="text" name="1_2" value="row 1 col 2"></td>
                <td><input id="1_3" type="text" name="1_3" value="row 1 col 3"></td>
                <td><input id="1_4" type="text" name="1_4" value="row 1 col 4"></td>
                <td><input id="1_5" type="text" name="1_5" value="row 1 col 5"></td>
                <td><img class="deleterow" src="minus.png"></td>
            </tr>
            <tr>
                <td>Head 3<input type="hidden" name="rowvalue" value="Head 3"></td>
                <td><input id="2_0" type="text" name="2_0" value="row 2 col 0"></td>
                <td><input id="2_1" type="text" name="2_1" value="row 2 col 1"></td>
                <td><input id="2_2" type="text" name="2_2" value="row 2 col 2"></td>
                <td><input id="2_3" type="text" name="2_3" value="row 2 col 3"></td>
                <td><input id="2_4" type="text" name="2_4" value="row 2 col 4"></td>
                <td><input id="2_5" type="text" name="2_5" value="row 2 col 5"></td>
                <td><img class="deleterow" src="minus.png"></td>
            </tr>
            <tr>
                <td>Head 4<input type="hidden" name="rowvalue" value="Head 4"></td>
                <td><input id="3_0" type="text" name="3_0" value="row 3 col 0"></td>
                <td><input id="3_1" type="text" name="3_1" value="row 3 col 1"></td>
                <td><input id="3_2" type="text" name="3_2" value="row 3 col 2"></td>
                <td><input id="3_3" type="text" name="3_3" value="row 3 col 3"></td>
                <td><input id="3_4" type="text" name="3_4" value="row 3 col 4"></td>
                <td><input id="3_5" type="text" name="3_5" value="row 3 col 5"></td>
                <td><img class="deleterow" src="minus.png"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td><img class="deletecolumn" src="minus.png"></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>

</body>

Answer 1

如果您在删除之后或提交之前调用了重置ID的函数，该怎么办？

首先，将包含数据的<tr>更改为<tr class='datarow'>

然后：

    var row = 0;
    $(".datarow").each(function(){
        var col = 0;
        $(this).find("input").each(function(){
           var id = row + "_" + col;
           $(this).attr('id', id).attr('name', id);
           col++;
        });
        row++;
    });

JQuery删除表行列 - 重新生成新鲜矩阵

1 个答案: