JS添加文本框 配合struts2

自己备份，以便后用。

实现功能：点添加按钮生成一排text（可自定义）。

JS代码如下：

 

<script language="javascript" type="text/javascript">
var i = ${count};
var b = 0;
    function addRow() {
        var root = document.getElementById("table1");

        var newRow = root.insertRow();

        var cell1 = newRow.insertCell();
        cell1.innerHTML = '<input type=checkbox name="materialDetaillist[' + i + '].id">';

        var cell2 = newRow.insertCell();
        cell2.innerHTML = '<input type=text name="materialDetaillist[' + i + '].name">';

        var cell3 = newRow.insertCell();
        cell3.innerHTML = '<input type=text name="materialDetaillist[' + i + '].unit">';

        var cell4 = newRow.insertCell();
        cell4.innerHTML = '<input type=text name="materialDetaillist[' + i + '].charge">';

        var cell5 = newRow.insertCell();
        cell5.innerHTML = '<input type=text name="materialDetaillist[' + i + '].liechtenstein">';

        var cell6 = newRow.insertCell();
        cell6.innerHTML = '<input type=text name="materialDetaillist[' + i + '].price">';

        var cell7 = newRow.insertCell();
        cell7.innerHTML = '<input type=text name="materialDetaillist[' + i + '].amount">';

        i = i + 1;
        b++;

    }

    </script>

使用javascript的newRow对html进行插入html语言

调用按钮为：

 

<input name="add" type="button" value="添加" onClick="addRow()" />

 

显示代码（由于是一个list 需要迭代） 可以使用strust2的<s:list/>

 

<s:iterator value="materialDetaillist" id="materialDetail"
            status="status">
            <tr align="center" style="cursor: hand">
                <td><input type="checkbox" name="ch1"
                    value="${materialDetail.id}" /> <s:hidden
                    value="${materialDetail.id}"
                    name="materialDetaillist[${status.index}].id" /> <s:hidden
                    name="materialDetaillist[${status.index}].materialDetail.id"
                    value="${materialDetail.id}"></s:hidden><%=n++%></td>
                    <!--  
                <td><input type="checkbox" name="materialDetaillist[${status.index}].id"
                    value="${materialDetail.id}" /></td>
                    -->
                <td><s:textfield
                    name="materialDetaillist[${status.index}].name"
                    value="${materialDetail.name }" /></td>
                <td><s:textfield name="materialDetaillist[${status.index}].unit"
                    value="${materialDetail.unit }" /></td>
                <td><s:textfield name="materialDetaillist[${status.index}].price"
                    value="${materialDetail.price }" /></td>
                <td><s:textfield name="materialDetaillist[${status.index}].amount"
                    value="${materialDetail.amount }" /></td>
                <td><s:textfield name="materialDetaillist[${status.index}].charge"
                    value="${materialDetail.charge }" readonly="true"/></td>
                <td><s:textfield
                    name="materialDetaillist[${status.index}].liechtenstein"
                    value="${materialDetail.liechtenstein }" /></td>
                <td></td>
            </tr>
        </s:iterator>

 

其中EL参数以及value需要和Action匹配 hidden保存的id需要在Action判断是否同一条数据，以便更新或者添加.

也可以在javascript加一个删除和保存

 

function deleteLines() {

        var arr = document.getElementsByName("ch1");

        var strIds = "";
        var count = 0;
        for ( var i = 0; i < arr.length; i++) {
            if (arr[i].checked == true) {

                if (null == arr[i].value || "" == arr[i].value) {
                    document.all("tbo").deleteRow(i);
                    i = i - 1;
                } else {
                    strIds = strIds + ':' + arr[i].value;
                    count = 1;
                }
            }
        }
        if (count == 0) {
            alert('请选择要删除的行');
            return false;
        }
        var oForm = document.getElementById('materialDetailupdateform');
        oForm.action = "/contract/materialDetailDelete.do?strID=" + strIds;
        oForm.submit();
    }

    function deleteRow() {
        if (i == 1) {
            return;
        }
        var root = document.getElementById("table1");
        root.deleteRow(i);
        i = i - 1;
    }

 

这两个方法只使用于有数据时

调用为

 

<input name="del" type="button" value="删除" onClick="return deleteLines()" /> 
<input name="save" type="button" value="保存" onClick="materialDetailupdateform.submit();">

 

Action代码非常简单了 显示只需要返回一个list用于界面显示，修改的时候判断下ID是否存在false添加true更新.