Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

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

Post a Comment
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);
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr  class="rowUpdate">
        <td>Corredor Feed</td>
        <td>Id Corrdor
            <input type="text" value="" class="validate" name="idcorreo">
        </td>
        <td>Nombre
            <input type="text" value="" class="validate" name="nombre">
        </td>
        <td>Email
            <input type="text" value="foo@bar.com" class="validate" name="email">
        </td>
        <td>Empressa
            <input type="text" value="" class="validate" name="Empressa">
        </td>
        <td>Pagina Web
            <input type="text" value="" class="validate" name="paginaWeb">
        </td>
        <td>Telefono
            <input type="text" value="" class="validate" name="telephon">
        </td>
        <td>Cellular
            <input type="text" value="" class="validate" name="cellular" />
        </td>
        <td>

            <input type="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));

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

Solution 4:

Try This : 

<form name="form_name" id='form_name'>
    <table>
    <tr class="rowUpdate">
        <td>Corredor Feed</td>
        <td>Id Corrdor
            <input type="text" value="" class="validate" name="idcorreo">
        </td>
        <td>Nombre
            <input type="text" value="" class="validate" name="nombre">
        </td>
        <td>Email
            <input type="text" value="foo@bar.com" class="validate" name="email">
        </td>
        <td>Empressa
            <input type="text" value="" class="validate" name="Empressa">
        </td>
        <td>Pagina Web
            <input type="text" value="" class="validate" name="paginaWeb">
        </td>
        <td>Telefono
            <input type="text" value="" class="validate" name="telephon">
        </td>
        <td>Cellular
            <input type="text" value="" class="validate" name="cellular" />
        </td>
        <td>
            <input type="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));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

You may like these posts

Post a Comment for "How To Save The Content Of Each Column Of A Row In A JQuery Array"

Menu Halaman Statis