Переименование JSP тегов с помощью Jquery

Question

Помощь в поддержке проекта, использующего JSP и Jquery. Возникла проблема, когда они именуют поля ввода, как если бы они были массивом, а затем сериализуют форму как JSON. Проблема в том, что у них есть кнопка удаления в форме, и она не переименовывает поля ввода перед отправкой. Код JAVA видит это как пустую строку в массиве. Есть ли способ l oop над этими элементами и переименовать (переименовать) их в Jquery?

HTML

    <c:forEach items="${assignmentRecords}" var="assignmentRecord" varStatus="status">
                                        <tr <c:if test="${isTemplate!=0}">class="pte_row_markup"</c:if> id="${status.index }">
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner1">
                                                    <input type="hidden" name="assignmentSetGridList[${status.index}].asIndividuals" value="${fn:escapeXml(assignmentRecord.individual)}"/>
                                                    <input type="hidden" name="assignmentSetGridList[${status.index}].asIds" value="${assignmentRecord.id}"/>
                                                    <input type="hidden" name="assignmentSetGridList[${status.index}].asPrincipalIds" value="${assignmentRecord.principalId}"/>
                                                    <input type="hidden" name="assignmentSetGridList[${status.index}].asNames" value="${fn:escapeXml(assignmentRecord.name)}"/>
                                                    <span id="assignee@incrRowCnt">${fn:escapeXml(assignmentRecord.name)}</span>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner1">
                                                    <label style="display:none;" for="roleId@incrRowCnt">Role for ${assignmentRecord.name}</label>
                                                    <select id="roleId@incrRowCnt" name="assignmentSetGridList[${status.index}].asRole" size="1" >
                                                        <c:forEach var="item" items="${assignmentRoleList}">
                                                            <c:choose><c:when test="${item.value == assignmentRecord.role}">
                                                                <option value="${item.value}" selected="selected">${item.label}</option>
                                                            </c:when><c:otherwise>
                                                                <option value="${item.value}">${item.label}</option>
                                                            </c:otherwise></c:choose>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner1">
                                                    <label style="display:none;" for="taskTypeId@incrRowCnt">Task Type for ${assignmentRecord.name}</label>
                                                    <select id="taskTypeId@incrRowCnt" name="assignmentSetGridList[${status.index}].asTaskType" size="1" >
                                                        <c:choose><c:when test="${preferencesForm.typeIsAudit==false}">
                                                            <c:forEach var="item" items="${regAsgntTaskTypeList}">
                                                                <c:choose><c:when test="${item.value == assignmentRecord.taskType}">
                                                                    <option value="${item.value}" selected="selected">${item.label}</option>
                                                                </c:when><c:otherwise>
                                                                    <option value="${item.value}">${item.label}</option>
                                                                </c:otherwise></c:choose>
                                                            </c:forEach>
                                                        </c:when><c:otherwise>
                                                            <c:forEach var="item" items="${auditAsgstTypTaskTypMap[preferencesForm.asetName]}">
                                                                <c:choose><c:when test="${item.value == assignmentRecord.taskType}">
                                                                    <option value="${item.value}" selected="selected">${item.label}</option>
                                                                </c:when><c:otherwise>
                                                                    <option value="${item.value}">${item.label}</option>
                                                                </c:otherwise></c:choose>
                                                            </c:forEach>
                                                        </c:otherwise></c:choose>
                                                    </select>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner1">
                                                    <!-- <div class="datePickerDecorator"> -->
                                                        <div class="uef-input uef-date-enhanced pte_overwrite1" data-uefID="uef-in-dtPkr">
                                                            <label style="display:none;" for="dateDueId@incrRowCnt">Due Date for ${assignmentRecord.name}, format m m / d d / y y y y</label>
                                                            <input id="dateDueId@incrRowCnt" name="assignmentSetGridList[${status.index}].asDueDate" type="text" class="uef-datePicker" 
                                                                        autocomplete="off"  value="${assignmentRecord.dueDate}"/>
                                                        </div>
                                                    <!-- </div> -->
                                                </div>
                                                <div id="pte_table_cell_inner2">
                                                    <p class="supportText" id=""><emac:message key="preferences.templates.edit.table.dateFormat"/></p>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner1">
                                                    <label style="display:none;" for="timeDueId@incrRowCnt">Time Due for ${assignmentRecord.name}</label>
                                                    <select id="timeDueId@incrRowCnt" name="assignmentSetGridList[${status.index}].asTimeDue" size="1" >
                                                        <option value="">--</option>
                                                        <c:forEach var="item" items="${timeDueList}">
                                                            <c:choose><c:when test="${item.value == assignmentRecord.time}">
                                                                <option value="${item.value}" selected="selected">${item.label}</option>
                                                            </c:when><c:otherwise>
                                                                <option value="${item.value}">${item.label}</option>
                                                            </c:otherwise></c:choose>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">
                                                <div id="pte_table_cell_inner4">
                                                    <div class="spellCheckerDecorator">
                                                        <div class="uef-textArea uef-input pte_overwrite1" data-uefID="uef-in-txtArea@incrRowCnt">
                                                            <label style="display:none;" for="instructionsId@incrRowCnt">Instructions for ${assignmentRecord.name}</label>
                                                            <textarea id="instructionsId@incrRowCnt" name="assignmentSetGridList[${status.index}].asInstructions" rows="5" cols="40" maxlength="800" 
                                                                    class="charCounter" >${assignmentRecord.instructions}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div></td>
                                            <td><div id="pte_table_cell_outer">

                                                <div id="pte_table_bdcell_inner_actn">
                                                    <input type="submit" id="removeBtnId@incrRowCnt" class="overlay uef-btn pte_header_btn" 
                                                            value='<emac:message key="preferences.templates.edit.table.remove.btn"/>'  
                                                            onClick="return PteUtil.deleteThisAssigneeFromSet(this);"/>
                                                </div>
                                            </div></td>
                                        </tr>
                                    </c:forEach>

Jquery

deleteThisAssigneeFromSet : function(btn, remove) {

        if( ! $(btn).parents('tr').hasClass('pte_row_markup') ) {
            $(btn).parents('tr').remove();
        }






    }

Answer 1

Да, вы можете легко получить эти элементы и обновить их свойство name; см. встроенные комментарии.

deleteThisAssigneeFromSet : function(btn, remove) {
    // Get the buttons' parent `tr` (I'd use `closest`, not `parents`)
    var parent = $(btn).closest('tr');
    if( ! parent.hasClass('pte_row_markup') ) {
        // Get the row's siblings
        var siblings = parent.siblings('tr');
        // Remove the row
        parent.remove();
        // Update the inputs in the rows, row-by-row
        siblings.each(function(i) {
            var brackets = "[" + i + "]";
            // Uses an "attribute starts with" selector to find the inputs
            $(this).find("[name^=assignmentSetGridList]").each(function() {
                this.name = this.name.replace(/\[\d+\]/, brackets);
            });
        });
    }

Live Пример:

function deleteThisAssigneeFromSet(btn, remove) {
    // Get the buttons' parent `tr` (I'd use `closest`, not `parents`)
    var parent = $(btn).closest('tr');
    if( ! parent.hasClass('pte_row_markup') ) {
        // Get the row's siblings
        var siblings = parent.siblings('tr');
        // Remove the row
        parent.remove();
        // Update the inputs in the rows, row-by-row
        siblings.each(function(i) {
            var brackets = "[" + i + "]";
            // Uses an "attribute starts with" selector to find the inputs
            $(this).find("[name^=assignmentSetGridList]").each(function() {
                this.name = this.name.replace(/\[\d+\]/, brackets);
            });
        });
    }
}
$("input[value=delete]").on("click", function() {
    deleteThisAssigneeFromSet(this);
});

<table>
    <tr  id="IINDEXX">
        <td><div id="pte_table_cell_outer">
            <div id="pte_table_cell_inner1">
                <input type="hidden" name="assignmentSetGridList[0].asIndividuals" value=""/>
                <input type="hidden" name="assignmentSetGridList[0].asIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[0].asPrincipalIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[0].asNames" value=""/>
            </div>
        </div>
        </td>
        <td>
            <input type="button" value="delete">
        </td>
    </tr>
    <tr  id="1">
        <td><div id="pte_table_cell_outer">
            <div id="pte_table_cell_inner1">
                <input type="hidden" name="assignmentSetGridList[1].asIndividuals" value=""/>
                <input type="hidden" name="assignmentSetGridList[1].asIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[1].asPrincipalIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[1].asNames" value=""/>
            </div>
        </div>
        </td>
        <td>
            <input type="button" value="delete">
        </td>
    </tr>
    <tr id="2">
        <td><div id="pte_table_cell_outer">
            <div id="pte_table_cell_inner1">
                <input type="hidden" name="assignmentSetGridList[2].asIndividuals" value=""/>
                <input type="hidden" name="assignmentSetGridList[2].asIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[2].asPrincipalIds" value=""/>
                <input type="hidden" name="assignmentSetGridList[2].asNames" value=""/>
            </div>
        </div>
        </td>
        <td>
            <input type="button" value="delete">
        </td>
    </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Примечание: похоже, строки имеют индекс как id s. Если вы хотите исправить их тоже, добавьте это в верхней части обратного вызова siblings.each:

this.id = i;