HTML代码列表不会在操作Arraylist

Question

我在struts2应用程序中有一个动态添加/删除行功能。

现在第一个值正确地从JSP绑定到action，因为JSP中存在struts标记（s:select）的第一个值，但是从Javascript添加的动态行没有绑定到Action列表。动作ArrayList值没有绑定，这是我到目前为止的代码：

<legend class="legendtitle">Training Needs Analysis</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="trainingTable">
    <thead>
        <tr>
            <td class="Htd_one1">
                <div align="center">Course:</div>
            </td>
            <td class="Htd_one1">
                <div align="center">Course Name (if Others):<span class="mandatory">*</span></div>
            </td>
            <td class="Htd_one1">
                <div align="center">Training Type:<span class="mandatory">*</span></div>
            </td>
            <td class="Htd_one1">
                <div align="center">Reason For Recommendation:<span class="mandatory">*</span></div>
            </td>
            <td class="Htd_one1">
                <div align="center">Action</div>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="dataone1" width="20%">
                <s:div align="center">
                    <s:select list="courseNameList" name="appTrngMstrList[0].courseCode" headerKey="0" headerValue="SELECT" id="courseCode0"
                        onchange="enableDetailCourseSection(this.value,0)" theme="simple" listKey="displayKey" cssClass="txtbox"
                        listValue="displayValue" />
                </s:div>
            </td>
            <s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].courseCode" id="courseCodeHide0"></s:hidden>

            <td class="dataone1">
                <s:div id="courseOthersTextTd" align="center">
                    <s:textfield id="courseOthers0" name="appTrngMstrList[0].courseOthers" cssClass="txtbox_mandatory" theme="simple" cols="50"
                        rows="3" maxLength="200" onblur="convertToUpper(this)" />
                </s:div>
            </td>
            <s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].courseOthers" id="courseOthersHide0"></s:hidden>
            <td class="dataone1">
                <s:div id="trainingTypeTextTd" align="center">
                    <s:select headerKey="0" headerValue="SELECT" list="#{'I':'INTERNAL','E':'EXTERNAL'}" name="appTrngMstrList[0].trainingType"
                        id="trainingType0" theme="simple" cssClass="txtbox_mandatory"></s:select>
                </s:div>
            </td>
            <s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].trainingType" id="trainingTypeHide0"></s:hidden>
            <td class="dataone2">
                <s:div align="center">
                    <s:textarea name="appTrngMstrList[0].reasonOfRecomndtn" id="reasonOfRecomndtn0" cols="40" theme="simple" cssClass="txtbox_mandatory_big"
                        onblur="convertToUpper(this);" onkeydown="textCounter(this,4000);" onkeyup="textCounter(this,4000);"
                    />
                </s:div>
                <s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].reasonOfRecomndtn" id="reasonOfRecomndtnHide0"></s:hidden>
            </td>
            <td align="center">
                <input type="button" value="Delete" class="btn" id="deletSelfrowid" onclick="deleteTrainingRow(0);" />
            </td>
        </tr>
    </tbody>
</table>
<table id="table1" width="100%">
    <tr>
        <td colspan="3" align="center">
            <input type="button" class="btn" value="Add Row" id="addSelfrowId" onclick="addTrainingRow(0)">&nbsp;
        </td>
    </tr>
</table>

Javascript代码

function addTrainingRow(index) {
    var str = "";
    var rowCnt = document.getElementById('rowCnt').value;
    var tbody =
        document.getElementById("trainingTable").getElementsByTagName("TBODY")[0];

    var row = document.createElement("TR");

    var check = rowCnt % 2;
    if (check == 0) {
        row.className = "oddrow";
    }
    else {
        row.className = "evenrow";
    }

    var optionValue1 = new Array();

    var keyValue1 = new Array();

    var courseCode = document.getElementById('courseCode' + index);

    var length1 = courseCode.options.length;

    for (var i = 0; i < length1; i++) {
        dropdownKey = courseCode.options[i].value;
        keyValue1[i] = dropdownKey;
    }

    for (var i = 0; i < length1; i++) {
        dropdownValues = courseCode.options[i].text;
        optionValue1[i] = dropdownValues;
    }


    var optionValue2 = new Array();

    var keyValue2 = new Array();
    var strVal = "";
    strVal = strVal + '<option value=\"0">SELECT</option><option value=\"I\">INTERNAL</option><option value=\"E\">EXTERNAL</option>';
    var s1 = "";
    var s2 = "";

    for (var i = 0; i < optionValue1.length; i++) {
        s1 = s1 + '<option value="' + keyValue1[i] + '">' + optionValue1[i] + '</option>';
    }
    s2 = s2 + '<option value="0">SELECT</option>';

    //var str1='<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode'+rowCnt+'\" name=\"appTrngMstrList['+rowCnt+'].courseCode\" onchange=\"enableDetailCourseSection(this.value,'+rowCnt+');\">'+s1+'</select></div>';
    var str1 = '<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].courseCode\" onchange=\"enableDetailCourseSection(this.value,' + rowCnt + ');\">' + s1 + '</select></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].courseCode\" id=\"courseCodeHide' + rowCnt + '\"/>';
    var str4 = '<div align=\"center\"><input type=\"text\" name=\"appTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthers' + rowCnt + '\" class=\"txtbox_mandatory\"   theme=\"simple\" cols=\"50\" rows=\"3\" maxLength=\"200\" onblur=\"convertToUpper(this)\"/></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthersHide' + rowCnt + '\"/>';

    var str2 = '<div id=\"trainingTypeTextTd' + rowCnt + '\" align=\"center\"><select class=\"txtbox_mandatory\" theme=\"simple\"  id=\"trainingType' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].trainingType\">' + strVal + '</select></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].trainingType\" id=\"trainingTypeHide' + rowCnt + '\"/>';

    var str5 = '<div align=\"center\"><input type=\"text\" theme=\"simple\" class=\"txtbox_mandatory_big\" cols=\"40\"  name=\"appTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtn' + rowCnt + '\"    onblur=\"convertToUpper(this);\" onkeydown=\"textCounter(this,4000);\" onkeyup=\"textCounter(this,4000);\"/></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtnHide' + rowCnt + '\"/>';

    var str8 = '<div align=\"center\"><input type=\"button\" value=\"Delete\" class=\"btn\" id=\"deletSelfrowid\" onclick=\"deleteTrainingRow(' + rowCnt + ');\"/></div>';


    var td1 = document.createElement("TD");
    td1.innerHTML = str1;
    var td4 = document.createElement("TD");
    td4.innerHTML = str4;

    var td2 = document.createElement("TD");
    td2.innerHTML = str2;

    var td5 = document.createElement("TD");
    td5.innerHTML = str5;

    var td8 = document.createElement("TD");
    td8.innerHTML = str8;

    td1.className = "td_one1";
    td4.className = "td_one1";
    td2.className = "td_one1";
    td5.className = "td_one1";
    td8.className = "td_one1";

    row.appendChild(td1);
    row.appendChild(td4);
    row.appendChild(td2);
    row.appendChild(td5);
    row.appendChild(td8);


    tbody.appendChild(row);


    //set the number of rows
    document.getElementById("rowCnt").value = Number(rowCnt) + 1;
}




function deleteTrainingRow(id) {
    var optionValue1 = new Array();
    var optionValue2 = new Array();

    var keyValue1 = new Array();
    var keyValue2 = new Array();
    //Get the existing number of rows

    var existingNumOfRows = document.getElementById("rowCnt").value;

    var atLeastOneRowSelected = false;
    // TO check atleast one row is not deleted.
    var count = 0;

    if (parseInt(existingNumOfRows) == 1) {
        alert("Cannot delete all rows.");
        return false;
    }

    var index = 1;
    var rowCnt = 0;
    var recommendStr = '';
    var otherStr = '';
    var tempArray = new Array();//This will be used to take the backup of the current unselected rows

    for (var i = 0; i < existingNumOfRows; i++) {
        if (parseInt(id) != parseInt(i)) {
            var row = document.createElement("TR");


            var check = rowCnt % 2;
            if (check == 0) {
                row.className = "oddrow";
            }
            else {
                row.className = "evenrow";
            }

            var courseCode = document.getElementById('courseCode' + i);

            var length1 = courseCode.options.length;
            for (var j = 0; j < length1; j++) {
                dropdownKey = courseCode.options[j].value;
                keyValue1[j] = dropdownKey;
            }
            for (var j = 0; j < length1; j++) {
                dropdownValues = courseCode.options[j].text;
                optionValue1[j] = dropdownValues;
            }

            var s1 = "";

            for (var j = 0; j < optionValue1.length; j++) {
                if (document.getElementById("courseCode" + i).selectedIndex == j) {
                    s1 = s1 + '<option value="' + keyValue1[j] + '" selected>' + optionValue1[j] + '</option>';
                }
                else {
                    s1 = s1 + '<option value="' + keyValue1[j] + '">' + optionValue1[j] + '</option>';
                }
            }

            var trainingType = document.getElementById('trainingType' + i);
            var length2 = trainingType.options.length;
            for (var j = 0; j < length2; j++) {
                dropdownKey = trainingType.options[j].value;
                keyValue2[j] = dropdownKey;
            }
            for (var j = 0; j < length2; j++) {
                dropdownValues = trainingType.options[j].text;
                optionValue2[j] = dropdownValues;
            }
            var s2 = "";

            for (var j = 0; j < optionValue2.length; j++) {
                if (document.getElementById("trainingType" + i).selectedIndex == j) {
                    s2 = s2 + '<option value="' + keyValue2[j] + '" selected>' + optionValue2[j] + '</option>';
                }
                else {
                    s2 = s2 + '<option value="' + keyValue2[j] + '">' + optionValue2[j] + '</option>';
                }
            }


            recommendStr = document.getElementById('reasonOfRecomndtn' + i).value;

            //alert(document.getElementById("courseCode"+i).selectedIndex);
            if (document.getElementById("courseCode" + i).selectedIndex == "20") {
                otherStr = document.getElementById('courseOthers' + i).value;
            }

            var str1 = '<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode' + rowCnt + '\" name="\appTrngMstrList[' + rowCnt + '].courseCode\" onchange=\"enableDetailCourseSection(this.value,' + rowCnt + ');\">' + s1 + '</select></div>';
            var str4 = '<div align=\"center\"><input type=\"text\" name=\"appTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthers' + rowCnt + '\" class=\"txtbox_mandatory\"  theme=\"simple\" cols=\"50\" rows=\"3"\ maxLength=\"200\" onblur=\"convertToUpper(this);\" value=\"' + otherStr + '\"/></div>';
            var str2 = '<div id=\"trainingTypeTextTd' + rowCnt + '\" align=\"center\"><select class=\"txtbox_mandatory\" theme=\"simple\"  id=\"trainingType' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].trainingType\">' + s2 + '</select></div>';
            var str5 = '<div align=\"center\"><input type=\"text\" theme=\"simple\" class=\"txtbox_mandatory_big\" cols=\"40\"  name=\"appTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtn' + rowCnt + '\" onblur=\"convertToUpper(this);\" onkeydown=\"textCounter(this,4000);\" onkeyup=\"textCounter(this,4000);\" value=\"' + recommendStr + '\"/></div>';
            var str8 = '<div align=\"center\"><input type=\"button\" value=\"Delete\" class=\"btn\" id=\"deletSelfrowid\" onclick=\"deleteTrainingRow(' + rowCnt + ');\"/></div>';


            var td1 = document.createElement("TD");
            td1.innerHTML = str1;
            var td4 = document.createElement("TD");
            td4.innerHTML = str4;
            var td2 = document.createElement("TD");
            td2.innerHTML = str2;
            var td5 = document.createElement("TD");
            td5.innerHTML = str5;
            var td8 = document.createElement("TD");
            td8.innerHTML = str8;

            td1.className = "td_one1";
            td4.className = "td_one1";
            td2.className = "td_one1";
            td5.className = "td_one1";
            td8.className = "td_one1";

            row.appendChild(td1);
            row.appendChild(td4);
            row.appendChild(td2);
            row.appendChild(td5);
            row.appendChild(td8);

            tempArray[rowCnt] = row;
            index++;
            rowCnt++;
        }
    }


    //Delete all the rows 
    var table = document.getElementById("trainingTable");
    var headerRowCount = 0;
    for (var i = (existingNumOfRows); i > headerRowCount; i--) {
        table.deleteRow(i);
    }

    var tbody = document.getElementById("trainingTable").getElementsByTagName("TBODY")[0];

    //Add the backup rows
    for (var i = 0; i < rowCnt; i++) {
        tbody.appendChild(tempArray[i]);
    }
    //set the number of rows

    document.getElementById("rowCnt").value = Number(rowCnt);
}

我在POJO类中有所有getter / setter，但仍然是appTrngMstrList[0]值，我进入Action类，但是我动态添加的任何行appTrngMstrList[1]都没有绑定到Action列表。

另外，我将隐藏变量作为变通方法，但即使hrAppHeader.appHidenVarTrngMstrList也没有绑定动态行。

Answer 1

我无法完全理解您的代码方法。但我总体上试图回答。希望这会有所帮助

1. 如果您使用javascript在JSP上添加/删除元素，请使用相同的元素名称和不同的ID。

   <input name="firstInput" id="1'+rowIndex+'" />

2. 在您的动作类中，您将拥有类似

   的内容

   private String firstInput[]; //getter and setter

提交表单后，firstInput数组将具有名称为firstInput

的所有元素的值