如何将输入数据(许多数据）添加到同一页面的下表中

How to add the input data(many data) into table below within same page?

本文关键字：一页添加输入数据多数据更新时间：2023-09-26

List<Object1> list = new ArrayList<>();
List<Object2> list = new ArrayList<>();

"添加列表"按钮用于将代码和值添加到文本框，如下所示。
添加按钮用于将所有输入数据添加到下表中。
删除按钮用于从表
中删除"提交"按钮用于发布到服务器。

所以我要做的是

对于按钮添加而不是添加列表<- 根本不知道！

function Add() {
            var url = "/root/info/add&"+$("#fieldrows").serialize();
            uField(url);
            return false;
        }
        function uField(url) {
            $.ajax({
                type: 'GET'
                url: url,
                async: false,
                success: function(data) {
                    try {
                        var res = eval("("+data+")");
                        if (res.success) {
                            var content="";
                            $.each(res.result, function(i, f) {
                                content+=addRow((i%2==1),f.seq,f.name,....);
                            });
                            $("#fieldrows").find("tbody").html(content);
                            bindFieldLink();
                        } else {
                            alert(res.error);
                        }
                    }catch(e) {}
                }
            });
        }
        function addRow(odd, seq,name,...) {
            var oddS = "odd";
            if (!odd) { oddS = "even"; }            
            var style="";
            var seq="<a id='field_id_"+seq+"' class='fLink' href='#'>"+label+"</a>";
            var row = "<tr class='"+oddS+"'><td class='chk'><input type='checkbox' seq='ids' value='"+seq+"' class='checkbox'></td>";
            row += "<td>"+seq+"</td>";
            row += "<td>"+rexp+"</td>";
            row +="</tr>";
            return row;
        }

调用函数通过 ajax 调用服务器，不确定 url 的 .serialize（） 是什么
在服务器上，它返回为 JSON，我也是新手。
之后为结果表构建 html。但我不确定什么是 bindFieldLink（）。

有人请帮忙。我正在使用JAVA，Spring MVC。非常感谢。

这篇文章可以关闭。

var myJson = [{"name" : "abc", "age" : 50},
          {"age" : "25", "hobby" : "swimming"},
          {"name" : "xyz", "hobby" : "programming"}];
// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0 ; i < myJson.length ; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
        var cellValue = myList[i][columns[colIndex]];
        if (cellValue == null) { cellValue = ""; }
        row$.append($('<td/>').html(cellValue));
    }
    $(selector).append(row$);
 }
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
 function addAllColumnHeaders(myList){
   var columnSet = [];
   var headerTr$ = $('<tr/>');
   for (var i = 0 ; i < myList.length ; i++) {
      var rowHash = myList[i];
       for (var key in rowHash) {
          if ($.inArray(key, columnSet) == -1){
              columnSet.push(key);
              headerTr$.append($('<th/>').html(key));
           }
        }
     }
    $(selector).append(headerTr$);
   return columnSet;
   }

.HTML：

 <body onLoad="buildHtmlTable('#excelDataTable')">
   <table id="excelDataTable" border="1">
   </table>
 </body>