How to handle Table data form submission in Spring Framework?

Question

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>

How to post the tables values into the controller?
How to get values inside the controller?

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, Oct 28 '13 at 10:33
Please, check this post http://stackoverflow.com/questions/10489046/how-to-pass-contents-of-an-html-table-as-form-data-on-a-post — fujy, Oct 29 '13 at 13:53
@fujy Thank you for support..In your answer, table having input element but here am not using any extra form elements..I got one solution for this please check it!! — Aravind Cheekkallur, Nov 06 '13 at 11:26

score 4 · Accepted Answer · answered Nov 06 '13 at 04:33

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 completing the each row,add the array into jsonobject.
step 4: Once the iteration complete 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>

score 1 · Answer 2 · edited May 23 '17 at 12:29

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.net/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);

NP @AravindCheekkallur. I just simplified it a little more by using javascript to do the conversion to json. I created this and stored it in a hidden `input` so it would get into the form `POST`. — L_7337, May 03 '14 at 11:31
@AravindCheekkallur That's just what I did in my actual code. I didn't do this in the jsfiddle because I am not actually `POST`ing anything there. — L_7337, May 03 '14 at 14:04
@AravindCheekkallur If it's a good answer, you should accept it. In fact, you should check your previous questions and do this same. You haven't accepted many answers. — L_7337, May 03 '14 at 14:47

How to handle Table data form submission in Spring Framework?

2 Answers2