How to get the values of a column from a table in jQuery into a multidimentional array

Question

I have a table that is something like this

<table width="60%">
    <tbody>
        <tr>
            <th>Corredor Feed</th>
            <th>Nombre</th>
            <th>Empressa</th>
            <th>Pagina Web</th>
            <th>Telefono</th>
            <th>Cellular</th>
        </tr>
       <tr class="row">
            <td>[email protected]
                <input type="hidden" value="[email protected]" name="email[]"/>
            </td>
            <td>
                <input type="input" value="" class="validate" name="nombre[]"/>
            </td>
            <td>
                <input type="input" value="" name="empressa[]"/>
            </td>
            <td>
                <input type="input" value="" name="paginaWeb[]"/>
            </td>
            <td>
                <input type="input" value="" name="telefono[]"/>
            </td>
            <td>
                <input type="input" value="" name="cellular[]"/>
            </td>
        </tr>
        <tr>
            <td align="right" colspan="6">
                <input type="submit" value="Enviar" name="submitme"/>
            </td>
        </tr>
    </tbody>
</table>

I am trying to create a multi dimensional array from the values obtained from each row in jQuery I have thought of a script like this

$('.row').each(function (i) {
                    $(this).find('td').each(function (j) {
                        /*if (j == 5) {
                            var x = $(this).find("input").val();
                            feed.push({
                                cellular: x
                            });
                        }*/
              //here I have to create an array that will hold value of each row 


                    });

                });
});

But I do not know how to push the values from the input type of each row into a multi dimensional array

JSFIDDLE Thanks in Advance

Ciccolina · Accepted Answer · 2015-01-20 13:05:17Z

2

Create a new array and object, loop through rows's content. Inside each row, retrieve input's name and value attributes. Add them to object and then .push() that object into rows array.

var rows = [];
$('.row').each(function (i) {
    var content = {};
    $(this).find('td').each(function (j, v) {
        var input = $("input", this),
            name = input.attr("name").substring(0, input.attr("name").length - 2),
            value = input.val();
        content[name] = value;
    });
    rows.push(content);
});

Here is a working example.

edited Jan 20, 2015 at 13:05

answered Jan 20, 2015 at 12:47

Ciccolina

5142 silver badges10 bronze badges

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

Comments

Fenistil · Accepted Answer · 2015-01-20 12:50:37Z

1

<table width="60%">
    <tbody>
        <tr>
            <th>Corredor Feed</th>
            <th>Nombre</th>
            <th>Empressa</th>
            <th>Pagina Web</th>
            <th>Telefono</th>
            <th>Cellular</th>
        </tr>
        <tr class="row">
            <td>[email protected]
                <input type="hidden" value="[email protected]" name="email[]" />
            </td>
            <td>
                <input type="input" value="1" class="validate" name="nombre[]" />
            </td>
            <td>
                <input type="input" value="2" name="empressa[]" />
            </td>
            <td>
                <input type="input" value="3" name="paginaWeb[]" />
            </td>
            <td>
                <input type="input" value="4" name="telefono[]" />
            </td>
            <td>
                <input type="input" value="5" name="cellular[]" />
            </td>
        </tr>
        <tr class="row">
            <td>[email protected]
                <input type="hidden" value="[email protected]" name="email[]" />
            </td>
            <td>
                <input type="input" value="2-1" class="validate" name="nombre[]" />
            </td>
            <td>
                <input type="input" value="2-2" name="empressa[]" />
            </td>
            <td>
                <input type="input" value="2-3" name="paginaWeb[]" />
            </td>
            <td>
                <input type="input" value="2-4" name="telefono[]" />
            </td>
            <td>
                <input type="input" value="2-5" name="cellular[]" />
            </td>
        </tr>
        <tr>
            <td align="right" colspan="6">
                <input type="submit" value="Enviar" name="submitme" />
            </td>
        </tr>
    </tbody>
</table>

<script>
var rows = new Array();
var row = new Array();

$('.row').each(function (i) {
    row = [];
    $(this).find('td').each(function (j) {
        row.push($(this).find("input").val());
    });
    rows.push(row);
});
alert(JSON.stringify(rows));
</script>

edited Jan 20, 2015 at 12:50

answered Jan 20, 2015 at 12:41

Fenistil

3,8111 gold badge29 silver badges33 bronze badges

3 Comments

Ciccolina Over a year ago

this will only return last row. You're wiping row array on each loop.

Fenistil Over a year ago

row = []; will create a new empty reference. You only can't access the original array by its variable (row), but the pushed array into the rows array will be accessible through rows[x][y]. Try it in fiddle, it works.

Fenistil Over a year ago

var a = new Array(), b = new Array(); a.push('something'); b = a; a = []; alert(b[0]); This will output 'something', however the a array was set to [].

Collectives™ on Stack Overflow

How to get the values of a column from a table in jQuery into a multidimentional array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related