Home/ Questions/Q 4595822
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T23:01:36+00:00

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

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

Initially, the table is loaded up dynamically, the matrix of each cell will be correct according to sequence.

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

When I click save button to post to server side, all the cell value need to in sequence, so that I can retrieve it via loop sequence.

Problem now is when I use the remove row and remove column feature, it will mess up the input id=”0_1″ name=”0_1″ created initially
The id/name is not going to follow number sequence anymore, it will have jumping number.

Is there any way to regenerate the matrix sequence and reassign back to override the id and name attribute for input field while remain the existing value inside it?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    what if you call a function that reset the id’s after deleting, or before submitting?

    First, change <tr> containing data to <tr class='datarow'>

    Then:

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