Question

This is my spring form code in jsp.

<div id="mainDiv">
    <div id="itWillRepeat">
        <table>
            <tbody>
                   <tr>
                      <td>1</td>
                      <td>item</td>
                      <td>item</td>
                      <td>
                        <form:label path="list[${itemsRow.index}].number">4</form:label>
                        <form:hidden path="list[${itemsRow.index}].number" />
                      </td>
                   </tr>
            </tbody>
        </table>
    </div>
</div>

Browser renders and generates HTML code for 4th <td> tag as:

<label for="list4.seq">4</label>
<input type="hidden" value="4" name="list[4].seq" id="list4.seq">

It shows value in browser as:

1  item  item  4

I want to change both the values of <form:label and <form:hidden on any event like onClick through simple JavaScript. I mention just one div with id itWillRepeat here. There can be many divs with id itWillRepeat because it will come in loop and I want to change values of all <form:label in ascending order.

Answer 1

button.onclick = function() {
    var rep = document.getElementById("mainDiv").getElementsByTagName('div');
       for (i = 0; i < rows.length; i++) {
            //get first label
            var label = rep.getElementsByTagName("label")[0]; 

             label.innerHTML = i+1;
             //get first input
             var hidn = rep.getElementsByTagName("input")[0];
              hidn.value = i+1;
         }
};

It will get all labels/hidden fields change their values and sort them.