如何在javascript中添加到arraylist答案

【问题标题】：How to add to arraylist in javascript如何在javascript中添加到arraylist
【发布时间】：2015-08-04 05:11:44
【问题描述】：

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

单击添加按钮部分工作正常。另外我将日期选择器添加到第二和第三列。它工作正常。代码如下.....

             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 需要转到后端（内置 spring mvc）。

1) 我们可以在 javascript 中创建一个数组列表吗？

2) 如果我们可以如何将文本框和日期选择器详细信息添加到数组列表中？

4) 如何将该数组列表传递给我的 spring mvc 控制器？

注意：我是 javascript 的新手。任何帮助都将不胜感激。

【问题讨论】：

@UnknownOctopus 他使用 Java 作为后端。（春天）
@UnknownOctopus:Java 是我的后端，spring mvc 是框架

标签： javascript java jquery spring arraylist

【解决方案1】：

    <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>

我们可以在 javascript 中创建一个数组列表吗？

是的。在我的示例中，var tdDetailList = []; 是数组（列表）。

您可以向其中添加元素： tdDetailList.push(tdDetail);

并删除索引中的元素：tdDetailList.splice(index, 1);

如果我们可以如何将文本框和日期选择器详细信息添加到数组列表中？

您可以创建如下对象：

var tdDetail = {code : row.cells[0].innerHTML, datepicker2 : row.cells[1].innerHTML, datepicker3 : row.cells[2].innerHTML};

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

如何将该数组列表传递给我的 spring mvc 控制器？

将列表转换为json

JSON.stringify(tdDetailList);

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

然后发送。

【讨论】：

对概念的清晰解释。对我有很大帮助。谢谢@Vitaly
很高兴为您提供帮助。你可以接受我的回答来完成这个话题。

【解决方案2】：

如果你想使用 JAVA SCRIPT 进行添加和删除，那么它会非常复杂和冗长。

但是使用 JQUERY 可以正常工作，您也可以轻松处理 ADD、DELETE 操作

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

你可能是 jQUERY 的新手，但一旦你得到它，它比 JAVA SCRIPT 更神奇

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

【讨论】：