如何在JavaScript中添加到arraylist

Question

我正在使用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中创建一个arraylist吗？

2）是否可以将文本框和日期选择器详细信息添加到arraylist？

4）如何将该arraylist传递到我的spring mvc控制器中？

注意：我是javascript的新手。任何帮助将非常可贵。

Answer 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中创建arraylist吗？

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

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

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

是否可以将文本框和日期选择器详细信息添加到arraylist？

您可以创建如下对象：

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

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

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

将列表转换为json

JSON.stringify(tdDetailList);

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

并且寄出。

Answer 2

如果要使用JAVA SCRIPT添加和删除，它将非常复杂且冗长。

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

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

也许您是jQUERY的新手，但一旦获得它，它比JAVA SCRIPT令人惊讶

希望您能让我知道是否有任何困惑。 ['}

如何在JavaScript中添加到arraylist

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-04 06:19:45

解决方案2
-3 2015-08-04 05:39:03

如何在JavaScript中添加到arraylist

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-04 06:19:45

解决方案2 -3 2015-08-04 05:39:03

解决方案1
1 已采纳 2015-08-04 06:19:45

解决方案2
-3 2015-08-04 05:39:03