Reading data from table (HTML, JAVAscript)

Question

I have this table that receive from the server: (with ajax):

    $.each(data, function(i, item) {
        $('#MyTable tbody').append("<tr>"d
             +"<td>" +data[i].A+ "</td><td>" 
             +data[i].B
             +"</td><td><input type='text' value='"
             +data[i].C+"'/></td><td><input type='text' value='"
             + data[i].D+"'/></td>"
             + "</tr>");
        });

C and D are edit text, that the user can change. after the changing by the user I want to "take" the all new data from the table and send it by ajax with JSON. how can I read the data to a JSON?

I start to write one but I am stuck on:

function saveNewData(){

    var newData= ...
$.ajax({
    type: "GET",
    url: "save",
    dataType: "json",
    data: { 
    newData: newData},
    contentType : "application/json; charset=utf-8",
    success : function(data) {
    ...
    },
    error : function(jqXHR, textStatus, errorThrown) {
        location.reload(true);
    }
    }); 
}

thank you

add some classes to the 3rd and 4th column inputs... select them by class... would you like to read the data from the last row or from all the rows ? — florin.prisecariu
– florin.prisecariu, Commented Jul 14, 2014 at 8:52

Nishan Senevirathna · Accepted Answer · 2014-07-14 11:46:27Z

1

Try something like this,

function getUserData()
{
    var newData = new Array();
    $.each($('#MyTable tbody tr'),function(key,val){
        var inputF = $(this).find("input[type=text]");          
        var fileldValues = {};
        fileldValues['c'] = $(inputF[0]).val();
        fileldValues['d'] = $(inputF[1]).val();

        //if you want to add A and B, then add followings as well
        fileldValues['a'] = $($(this).children()[0]).text();
        fileldValues['b'] = $($(this).children()[1]).text();
        newData.push(fileldValues);
    });
    return JSON.stringify(newData);
}

function saveNewData(){

var newData = getUserData();
$.ajax({
    type: "GET",
    url: "save",
    dataType: "json",
    data: { 
    newData: newData},
    contentType : "application/json; charset=utf-8",
    success : function(data) {
    ...
    },
    error : function(jqXHR, textStatus, errorThrown) {
        location.reload(true);
    }
}); 
}

edited Jul 14, 2014 at 11:46

answered Jul 14, 2014 at 9:00

Nishan Senevirathna

7196 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

yoka Over a year ago

How can I add row A and row B to "newData"?

yoka Over a year ago

How do I add an addition to C & D rows, the A & B rows to "newData"?

yoka Over a year ago

Thank you. and if I just want to return "real" array not one string?

yoka Over a year ago

There is lot of data in the table. I want Just to send JSON (not string).

Nishan Senevirathna Over a year ago

If you want to get real json object you can simply remove "JSON.stringify" function.

florin.prisecariu · Accepted Answer · 2014-07-14 09:03:29Z

1

http://jsfiddle.net/yGXYh/1/

small demo based on answer from Nishan:

var newData = new Array();
$.each($('#MyTable tbody tr'), function (key, val) {
    var inputF = $(this).find("input[type=text]");
    var fileldValues = {};
    fileldValues['c'] = $(inputF[0]).val();
    fileldValues['d'] = $(inputF[1]).val();
    newData.push(fileldValues);
});
alert(JSON.stringify(newData));

answered Jul 14, 2014 at 9:03

florin.prisecariu

4223 silver badges8 bronze badges

Comments

Nerdroid · Accepted Answer · 2014-07-14 09:25:39Z

1

use the jquery on event binding
try somthing like this. Fiddler Demo

$('#MyTable').on('keyup', 'tr', function(){
    var $this = $(this);
    var dataA = $this.find('td:nth-child(1)').text() // to get the value of A
    var dataB = $this.find('td:nth-child(2)').text() // to get the value of B
    var dataC = $this.find('td:nth-child(3)').find('input').val() // to get the value of C
    var dataD = $this.find('td:nth-child(4)').find('input').val() // to get the Valur of D

    // $.ajax POST to the server form here 
    //  this way you only posting one row to the server at the time

});

I don't normaly do that I would use a data binding libarray such as Knockoutjs or AngularJS

edited Jul 14, 2014 at 9:25

answered Jul 14, 2014 at 9:04

Nerdroid

14.1k5 gold badges62 silver badges72 bronze badges

Collectives™ on Stack Overflow

Reading data from table (HTML, JAVAscript)

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related