如何在javascript中添加到arraylist_Javascript_Java_Jquery_Spring_Arraylist

如何在javascript中添加到arraylist

javascript java jquery spring

如何在javascript中添加到arraylist,javascript,java,jquery,spring,arraylist,Javascript,Java,Jquery,Spring,Arraylist,我正在使用javascript进行服务器端验证。我需要在单击“添加”按钮时添加动态生成的表中的所有数据单击“添加按钮”部分工作正常。我还在第2列和第3列添加了日期选择器。工作正常。代码如下所示 function addRow(tableId) { //Add new row to given table having id tableId var table = document.getElementById(tableId); var rowCount = tab

我正在使用javascript进行服务器端验证。我需要在单击“添加”按钮时添加动态生成的表中的所有数据

单击“添加按钮”部分工作正常。我还在第2列和第3列添加了日期选择器。工作正常。代码如下所示

             function addRow(tableId) { //Add new row to given table having id tableId
var table = document.getElementById(tableId);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    cell1.innerHTML = '<input type="text" id="code'+ rowCount +'" name="code" maxlength="16"/>';
    cell2.innerHTML = '<input type="text" id="datepicker2'+ rowCount +'" class="datepicker" name="validFrom" maxlength="50" >';
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });
    cell3.innerHTML = '<input type="text" id="datepicker3'+ rowCount +'" class="datepicker" name="validFrom" maxlength="50" >';
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });
    cell4.innerHTML = '<input type="button" id="del'+ rowCount +'" name="del" />';

Html代码

<div class="systemsettings">
            <h3><spring:message code="systemSetting.ratePeriods.label"/></h3>
            </div>

            <div class="systemset" >
            <!-- table table-hover table-striped  table-bordered table-highlight-head-->
            <table  id="systemsettingstid" class="table-bordered table-striped">
            <thead class="tax_thead" id="tdDetailList">
                <tr >
                    <!-- <th>Applicable From</th> -->
                    <th width="200" id="code" title="Code"  >Code</th>
                    <th width="200" id="from" title="from ">from</th>
                    <th width="200" id="to" title="to">to</th>
                    <th width="50" id="del" title="del">del</th>

                <!--    <th width="45" ><div class="add_new">

            <a href="javascript:addRow('taxHdrTableList');" title="Add New Row"></a>
            </div></th> -->
                </tr>
            </thead>

            <tbody></tbody>
            </table>


            </div>

             <div>
              <tr>
              <button type="button"  onClick="javascript:addRow('systemsettingstid');">Add</button>
              </tr>
            </div>

删除按钮：

我在html代码中附加了一个删除按钮。单击它时，应自动删除相应的行，同时单击每行上的“添加”按钮

我的问题是：

添加和删除不会影响后端，只需在arraylist中更改即可

在最终表单提交期间，arraylist需要转到SpringMVC中的BackEndBuild

1我们可以用javascript创建arraylist吗

2如果可以，如何将文本框和日期选择器详细信息添加到arraylist

4如何将arraylist传递到我的spring mvc控制器

注意：我是javascript新手。任何帮助都会非常有用。

如果您想使用JAVA脚本添加和删除，那么它将非常复杂和冗长

但是使用JQUERY，它会工作得很好，而且您可以轻松地处理添加、删除操作

使用JQUERY，在这个append和remove方法中，您可以使用它在表中插入一行，在表中删除一行

也许你是jQUERY新手，但一旦你掌握了它，它会比JAVA脚本更神奇

如果你有任何困惑，希望你能告诉我。['}

    <script>
    var tdDetailList = [];
    function init() {
        var tdDetailTable = document.getElementById("tdDetailTable");       
        for (var i = 0, row; row = tdDetailTable.rows[i]; i++) {
            var tdDetail = {code : row.cells[0].innerHTML, datepicker2 : row.cells[1].innerHTML, datepicker3 : row.cells[2].innerHTML};         
            tdDetailList.push(tdDetail);
        }
        alert(getDetailTableJson());
    }

    function deleteRow(index){
       tdDetailList.splice(index, 1);
       var tdDetailTable = document.getElementById("tdDetailTable");
       tdDetailTable.deleteRow(index);
       alert(getDetailTableJson());
    }

    function getDetailTableJson(){
        return JSON.stringify(tdDetailList);
    }
</script>

<body onload="init();">
<table id="tdDetailTable">
<tr><td>1</td><td>2</td><td>3</td><td><a href="#" onclick="deleteRow(0); return true;">del</a></td></tr>
<tr><td>4</td><td>5</td><td>6</td><td><a href="#" onclick="deleteRow(1); return true;">del</a></td></tr>
</table>
</body>

使用表的字段，并将对象添加到列表中

如何将arraylist传递到我的spring mvc控制器

将列表转换为json

JSON.stringify(tdDetailList);

在我的示例中：[{code:1，datepicker2:2，datepicker3:3}，{code:4，datepicker2:5，datepicker3:6}]

然后发送。

@UnknownOctopus他正在使用Java作为后端。spring@UnknownOctopus：Java是我的后端，spring mvc是框架，清楚地解释了概念。对我帮助很大。谢谢@vitaly很乐意帮助。你可以接受我的答案来完成这个主题。

JSON.stringify(tdDetailList);