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

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

jquery

JQuery删除表行列-重新生成新矩阵,jquery,html-table,row,Jquery,Html Table,Row,当我点击save按钮发布到服务器端时，所有的单元格值都需要按顺序保存，这样我就可以通过循环顺序检索它 <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(

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

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

现在的问题是，当我使用删除行和删除列功能时，它会弄乱最初创建的输入id=“0\u 1”name=“0\u 1” id/名称不再遵循编号顺序，它将具有跳转编号

是否有任何方法可以重新生成矩阵序列并重新赋值，以覆盖输入字段的id和name属性，同时保留其中的现有值

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


A.
B
C
D
E
F
总目1
总目2
总目3
总目4

如果在删除后或提交前调用重置id的函数，该怎么办

首先，将包含数据的

更改为

然后：

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

    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++;
    });