JQuery get table row values from input and save to array

Question

I have a table with input fields inside the td. How can i get the values from the input fields (by button click) and store them into an array (one row) using JQuery ? So there are different rows with different contexts and i would like to process row by row, so i have to identify those rows by class and so on.

Thanks!

Update: I would like to have values from test1 in an array, test2 in an array and so on.

<tr class="test1">
 <td>
      <input type="text" name="test">
      <input type="text" name="test">
      <input type="text" name="test">
 </td>
</tr>

<tr class="test2">
 <td>
      <input type="text" name="test">
      <input type="text" name="test">
      <input type="text" name="test">
 </td>
</tr>

Can you paste your code to understand better? and easily we can help you in this regard. — skparwal
– skparwal, Commented Aug 5, 2014 at 9:54

gkonuralp · Accepted Answer · 2022-04-20 02:01:37Z

5

$('#button').click(function () {
  var array = [];

  $('#table tr').each(function () {
    var values = [];

    $(this)
      .find('input')
      .each(function () {
        values.push(this.val());
      });

    array.push(values);
  });
});

then you can take items by array.pop();

edited Apr 20, 2022 at 2:01

answered Aug 5, 2014 at 10:14

gkonuralp

4632 gold badges11 silver badges28 bronze badges

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

Comments

Ehsan Sajjad · Accepted Answer · 2014-08-05 10:11:24Z

you can do this way:

HTML:

<table>
    <tr class="test1">
        <td>
            <input type="text" name="test" />
            <input type="text" name="test" />
            <input type="text" name="test" />
            <td>
                <input type="button" class="GetValues" value="GetValues" />
            </td>
        </td>
    </tr>
    <tr class="test2">
        <td>
            <input type="text" name="test" />
            <input type="text" name="test" />
            <input type="text" name="test" />
        </td>
        <td>
            <input type="button" class="GetValues" value="GetValues" />
        </td>
    </tr>
</table>

JQUERY:

$(".GetValues").click(function () {
    var test1 = $(this).closest(".test1").find("input:text").map(function () {

        return $(this).val();

    });

    console.log(test1)

})

FIDDLE:

http://jsfiddle.net/XFy46/

Collectives™ on Stack Overflow

JQuery get table row values from input and save to array

2 Answers 2

Comments

HTML:

JQUERY:

FIDDLE:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

HTML:

JQUERY:

FIDDLE:

Comments

Your Answer

Sign up or log in

Post as a guest

Related