使用Ajax将数据添加到表行

时间:2013-10-10 10:55:44

标签: java javascript jsp spring-mvc

我需要从java脚本向表中添加数据。 Tha表在同一个.jsp文件中但在脚本内没有。

AJAX致电

<script type="text/javascript">
        function searchDetails() {

            $.ajax({
                type : "post",
                data : {
                    'accountNo' : $(accNumber).val()
                },
                url : "/banking-internet/account-history/add",
                cache : false,
                success : function(data) {
                    var transactionList = data;
                },
                error : function(e) {
                    alert('Error: ' + e);
                }
            });

        }
    </script>

表格

             <tr>
                <th>Transaction Type</th>
                <th>Amount</th>
                <th class="hide-on-mobile">Description</th>
            </tr>
            <c:forEach var="transaction" items="${transactionList}">
                <tr>
                    <td>${transaction.transactionDate}</td>
                    <td>${transaction.transactionType}</td>                     
                    <td>${transaction.accountNarration}</td>
                </tr>
            </c:forEach>

正确传递给数据的值。但我似乎无法从剧本中获取价值并使用它。

success : function(data) {
                        var transactionList = data;
                    },

此部分正确地从控制器获取值。

请帮助

1 个答案:

答案 0 :(得分:1)

为您的表添加ID,如:

    <table id="test_table">

然后打电话给:

    success : function(data) {
                    var transactionList = data;
                    addRow ("test_table", transactionList);
    },

最后替换cellX.innerHtml = data.whatever_member_object;

    <script language="javascript">
    function addRow(tableID, data) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHtml = data;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = data;

        var cell3 = row.insertCell(2);
        cell3.innerHTML = data;             
    }
    </script>

希望它有效。