Get all input values of html table rows

Question

I have this simple html table, where each cell has a input field

<table>
  <tbody>
    <tr>
      <td>
              <input type="text"name="bezeichnung" value="Bezeichnung" />
                <br />
                <textarea value="Beschreibung" name="beschreibung"></textarea>
            </td>
            <td><input type="text" name="menge" value="0,00" /></td>
            <td><input type="text" name="einheit" value="Stk." /></td>
            <td><input type="text" name="preis" value="0,00 €" /></td>
            <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
        </tr>
    </tbody>
</table>

Now I would like to get all values into an jQuery array. I tried this:

function getAllValues() {
    
   var allValues = {};
    
    $("#table tbody tr").find("input").each(function( index ) {
        params[index] = $(this).val()
    })
    
    console.log(params)
    
}

Output

{0: "Test", 1: "My Description", 2: "2,00", 3: "Fahrt", 4: "10,00 €", 5: "20,00 €"}

This looks okay, but not good. Instead of the index key 0, 1, 2, ... I would like to have the attribute "name" of the input field. But I don't know how :/

And the next problem is if I have more than one row the output looks like this:

{0: "Test", 1: "My Description", 2: "2,00", 3: "Fahrt", 4: "10,00 €", 5: "20,00 €", 6: "Test 2", 7: "", 8: "1,00", 9: "Std.", …}

It will be a long array instead of multidimensional array. Have you any idea?

Thank you very much !

Here's a similar question, with a different starting point, but easily adjustable to your HTML (once provided) https://stackoverflow.com/questions/69445221/get-all-values-of-clicked-input-field-row/69445483#69445483 — freedomn-m, Oct 05 '21 at 13:24
Use [`map()`](https://api.jquery.com/map) to create an array of objects instead. If you need a more complete example, please update the question to include the relevant HTML — Rory McCrossan, Oct 05 '21 at 13:25
A side question: The content of the array looks like similar to json, or I'm wrong? — Reporter, Oct 05 '21 at 13:27
@Reporter it's an object literal. Very similar in format to JSON, however there are some very crucial differences. See this question for more information: https://stackoverflow.com/q/2904131/519413 — Rory McCrossan, Oct 05 '21 at 13:31
@RoryMcCrossan Thanks for this link. It helps me to understand such kind of code better. — Reporter, Oct 05 '21 at 13:40

score 1 · Answer 1 · answered Oct 05 '21 at 13:40

You can fetch any property of an element with jQuery using the .attr('') method, then simply add to your object.

function getAllValues() {
    
   let result = [];
    
    $("table tbody tr").each(function() {
        var allValues = {}; 
        $(this).find("input").each(function( index ) {
             
             const fieldName = $(this).attr("name");
             allValues[fieldName] = $(this).val();
        });
        result.push(allValues);
    })
    console.log(result);
    
}

getAllValues();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
          <tbody>
            <tr>
              <td>
                      <input type="text"name="bezeichnung" value="Bezeichnung" />
                        <br />
                        <textarea value="Beschreibung" name="beschreibung"></textarea>
                    </td>
                    <td><input type="text" name="menge" value="0,00" /></td>
                    <td><input type="text" name="einheit" value="Stk." /></td>
                    <td><input type="text" name="preis" value="0,00 €" /></td>
                    <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
                </tr>

<tr>
              <td>
                      <input type="text"name="bezeichnung" value="Bezeichnung" />
                        <br />
                        <textarea value="Beschreibung" name="beschreibung"></textarea>
                    </td>
                    <td><input type="text" name="menge" value="0,00" /></td>
                    <td><input type="text" name="einheit" value="Stk." /></td>
                    <td><input type="text" name="preis" value="0,00 €" /></td>
                    <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
                </tr>
            </tbody>
        </table>

score 1 · Answer 2 · answered Oct 05 '21 at 13:40

You can loop through each tr then loop through each tr's input to convert each row's inputs into a new object and combine them as an array.

Added a second row to your sample HTML to show it return an array element for each row.

var values = [];
$("table tr").each((_, row) => {
  var value = {};
  $(row).find(":input").each((__, e) =>
    value[e.name] = $(e).val()
  );
  values.push(value);
});
console.log(values)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" name="bezeichnung" value="Bezeichnung" />
        <br />
        <textarea value="Beschreibung" name="beschreibung"></textarea>
      </td>
      <td><input type="text" name="menge" value="0,00" /></td>
      <td><input type="text" name="einheit" value="Stk." /></td>
      <td><input type="text" name="preis" value="0,00 €" /></td>
      <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
    </tr>
    <tr>
      <td>
        <input type="text" name="bezeichnung" value="Bezeichnung" />
        <br />
        <textarea value="Beschreibung" name="beschreibung"></textarea>
      </td>
      <td><input type="text" name="menge" value="0,00" /></td>
      <td><input type="text" name="einheit" value="Stk." /></td>
      <td><input type="text" name="preis" value="0,00 €" /></td>
      <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
    </tr>
  </tbody>
</table>

Version using .map without the initial array creation:

var values = $("table tr").map((_, row) => {
  var value = {};
  $(row).find(":input").each((__, e) =>
    value[e.name] = $(e).val()
  );
  return value;
}).toArray();

var values = $("table tr").map((_, row) => {
  var value = {};
  $(row).find(":input").each((__, e) =>
    value[e.name] = $(e).val()
  );
  return value;
}).toArray();
console.log(values)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" name="bezeichnung" value="Bezeichnung" />
        <br />
        <textarea value="Beschreibung" name="beschreibung"></textarea>
      </td>
      <td><input type="text" name="menge" value="0,00" /></td>
      <td><input type="text" name="einheit" value="Stk." /></td>
      <td><input type="text" name="preis" value="0,00 €" /></td>
      <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
    </tr>
    <tr>
      <td>
        <input type="text" name="bezeichnung" value="Bezeichnung" />
        <br />
        <textarea value="Beschreibung" name="beschreibung"></textarea>
      </td>
      <td><input type="text" name="menge" value="0,00" /></td>
      <td><input type="text" name="einheit" value="Stk." /></td>
      <td><input type="text" name="preis" value="0,00 €" /></td>
      <td><input type="text" name="gesamt" value="0,00 €" readonly /></td>
    </tr>
  </tbody>
</table>

Get all input values of html table rows

2 Answers2