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 !
CodePudding user response：
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>CodePudding user response：
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();