How To Save The Content Of Each Column Of A Row In A Jquery Array

Question

I am trying to create an array from the content of a table. The content of the tables looks something like this:

C

Solution 1:

Check this one. I changed var content= []; to var content= {};

$(document).on('click', '#guardarBtn', function (event) {
   var content= {};
    $('.rowUpdate').each(function (i) {

        $(this).find('td').each(function (j, v) {
            if (j != 0) {

                var input = $("input", this),
                    name = input.attr("name").substring(0, input.attr("name").length),
                    value = input.val();
                
                    content[name] = value;
            
               // alert(JSON.stringify(content));
            }
        });
       alert(JSON.stringify(content));
       // rows.push(content);
    });

});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="rowUpdate"><td>Corredor Feed</td><td>Id Corrdor
            <inputtype="text"value=""class="validate"name="idcorreo"></td><td>Nombre
            <inputtype="text"value=""class="validate"name="nombre"></td><td>Email
            <inputtype="text"value="foo@bar.com"class="validate"name="email"></td><td>Empressa
            <inputtype="text"value=""class="validate"name="Empressa"></td><td>Pagina Web
            <inputtype="text"value=""class="validate"name="paginaWeb"></td><td>Telefono
            <inputtype="text"value=""class="validate"name="telephon"></td><td>Cellular
            <inputtype="text"value=""class="validate"name="cellular" /></td><td><inputtype="submit"id="guardarBtn"value="Save"name="submitme"></td></tr></table>

Solution 2:

Try this (keep the HTML the same):

$(document).on('click', '#guardarBtn', function (event) {
    var rows = [];
    $('.rowUpdate').each(function (i) {
        var row = {};
        $(this).find('td').each(function (j, v) {

            if (j != 0) {
                var input = $("input", this),
                    name = input.attr("name").substring(0, input.attr("name").length),
                    value = input.val();
                row[name] = value;
            }
            rows.push(row);
        });
    });

Solution 3:

Shorter way to access :

$(document).on('click', '#guardarBtn', function (event) {
var content = {};
$('.rowUpdate').each(function (i) {
    $(this).find('input[type=text]').each(function(){
       content[$(this).attr("name")] = $(this).val();            
    });
});
alert(JSON.stringify(content));

});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="rowUpdate"><td>Corredor Feed</td><td>Id Corrdor
            <inputtype="text"value=""class="validate"name="idcorreo"></td><td>Nombre
            <inputtype="text"value=""class="validate"name="nombre"></td><td>Email
            <inputtype="text"value="foo@bar.com"class="validate"name="email"></td><td>Empressa
            <inputtype="text"value=""class="validate"name="Empressa"></td><td>Pagina Web
            <inputtype="text"value=""class="validate"name="paginaWeb"></td><td>Telefono
            <inputtype="text"value=""class="validate"name="telephon"></td><td>Cellular
            <inputtype="text"value=""class="validate"name="cellular" /></td><td><inputtype="submit"id="guardarBtn"value="Save"name="submitme"></td></tr></table>

Solution 4:

Try This :

Baca Juga

<formname="form_name"id='form_name'><table><trclass="rowUpdate"><td>Corredor Feed</td><td>Id Corrdor
            <inputtype="text"value=""class="validate"name="idcorreo"></td><td>Nombre
            <inputtype="text"value=""class="validate"name="nombre"></td><td>Email
            <inputtype="text"value="foo@bar.com"class="validate"name="email"></td><td>Empressa
            <inputtype="text"value=""class="validate"name="Empressa"></td><td>Pagina Web
            <inputtype="text"value=""class="validate"name="paginaWeb"></td><td>Telefono
            <inputtype="text"value=""class="validate"name="telephon"></td><td>Cellular
            <inputtype="text"value=""class="validate"name="cellular" /></td><td><inputtype="submit"id="guardarBtn"value="Save"name="submitme"></td></tr></table></form>

js Here :

    $(document).on('click', '#guardarBtn', function (event) {
var row=[];
    $('.rowUpdate').each(function (i) {
        var content=[];
        $(this).find('input').each(function(key,value){
          var field_name=$(this).attr('name');
          var field_value=$(this).val();
            content[field_name]=field_value;
        });
        row.push(content);
    });
    console.log(row);
});

Solution 5:

If I well understand the question, you just need for something like this (I'm not sure however why you used nested each loops - is there any reason of this? Do you have more code in between these loops?)

$(document).on('click', '#guardarBtn', function(e){
    var content={};
    $('.rowUpdate td').find('input').each(function(){
        content[this.name] = this.value;
    });
    alert(JSON.stringify(content));
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="rowUpdate"><td>Corredor Feed</td><td>Id Corrdor
            <inputtype="text"value=""class="validate"name="idcorreo"></td><td>Nombre
            <inputtype="text"value=""class="validate"name="nombre"></td><td>Email
            <inputtype="text"value="foo@bar.com"class="validate"name="email"></td><td>Empressa
            <inputtype="text"value=""class="validate"name="Empressa"></td><td>Pagina Web
            <inputtype="text"value=""class="validate"name="paginaWeb"></td><td>Telefono
            <inputtype="text"value=""class="validate"name="telephon"></td><td>Cellular
            <inputtype="text"value=""class="validate"name="cellular" /></td><td><inputtype="submit"id="guardarBtn"value="Save"name="submitme"></td></tr></table>

JavaScript Creator