javascript - How to handle Table data form submission in Spring Framework? - Stack Overflow

admin管理员组

文章数量:1335361

I am searching for some good solution for this problem?

I just want to submit all the table data into the controller. Rows are creating dynamically and also it does't have any element. Here am little confuse for handle entire table data processing.

<form action="controller.htm"   method="post">
<table>
<tr>
<td>one</td>
<td><two/td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<td>data11</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data 7</td>
</tr>
</table>
</form>

1. How to post the tables values into the controller?
2. How to get values inside the controller?

I am searching for some good solution for this problem?

I just want to submit all the table data into the controller. Rows are creating dynamically and also it does't have any element. Here am little confuse for handle entire table data processing.

<form action="controller.htm"   method="post">
<table>
<tr>
<td>one</td>
<td><two/td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<td>data11</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data 7</td>
</tr>
</table>
</form>

1. How to post the tables values into the controller?
2. How to get values inside the controller?

• javascript
• jquery
• html
• spring-data

Share Improve this question Follow edited May 2, 2014 at 21:10 Prasad 3,79522 gold badges1616 silver badges2323 bronze badges asked Oct 25, 2013 at 9:29 Aravind CheekkallurAravind Cheekkallur 3,20566 gold badges2828 silver badges4141 bronze badges 6

• i have never tried this, but you could try using a map. the key will be the attributename and the value the value of the attribute. – Philipp Sander Commented Oct 28, 2013 at 10:33
• @PhilippSander Using java script or jquery is it possible? – Aravind Cheekkallur Commented Oct 28, 2013 at 11:17
• maybe. i really don't know it – Philipp Sander Commented Oct 28, 2013 at 11:21
• Please, check this post stackoverflow./questions/10489046/… – fujy Commented Oct 29, 2013 at 13:53
• @PhilippSander I got the solution...please check it – Aravind Cheekkallur Commented Nov 6, 2013 at 11:23

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Hardly i find out the way to handle table data.To post large collection of data into controller using form might not be a good approach even if we don't have any input type html element.

Step 1: Read all table data by iterating through each cell using Java script.
step 2: Add cell element into array by specifying the column counter.
step 3 After pleting the each row,add the array into jsonobject.
step 4: Once the iteration plete stringfy the json object and using Ajax pass the Json string to the controller.

<script type="text/javascript">
function GetCellValues(dataTable) 
{
    var jsonObj = [];
    var jsonString;
    var table = document.getElementById(dataTable);
    for (var r = 0, n = table.rows.length; r < n; r++) {
        var item = {};
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++){        
            if(c == 1){
                item ["data1"] =table.rows[r].cells[c].innerHTML;}
            else if(c==2){
                item ["data2"] =table.rows[r].cells[c].innerHTML;}
            else if(c==3){
                item ["data3"] =table.rows[r].cells[c].innerHTML;}
            else if(c==4){
                 item ["data4"] = table.rows[r].cells[c].innerHTML;} 
            else if(c==5){
                item ["data5"] =table.rows[r].cells[c].innerHTML;}

        }
        jsonObj.push(item);
    }
    jsonString = JSON.stringify(jsonObj);
   alert("Save your data "+ jsonString);

    $.ajax({
        type: "POST",
        url : "tableData.htm?jsonData="+jsonString,
        success: function(data){
            $("#").html(data);      
        },
        error:function(data){
            console.log("failure"+data);
            alert("failure"+data);
        }
    });  
}
</script>

I know this is an older issue, but I had a similar situation and came up did this a little differently. I hope this helps someone else.

I had javascript parse the <table> for <tr> elements, then create a JSON string that I stored in a hidden <input> field.

This was adapted from another Stack Overflow post: post data from table row like json format

The basic code is below.

Full @ JSFiddle: http://jsfiddle/leisenstein/vy3ux/

// object to hold your data
function dataRow(value1,value2,value3) {
    this.dxCode = value1;
    this.dxDate = value2;
    this.dxType = value3;
}

// create array to hold your data
var dataArray = new Array(); 

// Start from 2 if you need to skip a header row
for(var i = 2; i <= $("table tr").length; i++){
        // create object and push to array
        dataArray.push(    
            new dataRow(
                $("table tr:nth-child(" + i + ") td").eq(0).html(),
                $("table tr:nth-child(" + i + ") td").eq(1).html(),
                $("table tr:nth-child(" + i + ") td").eq(2).html())
        );
}


var sJson = JSON.stringify(dataArray);

本文标签： javascriptHow to handle Table data form submission in Spring FrameworkStack Overflow