good morning,
maybe a easy question for you but a big step for me ;) I have this simple and table:
<table>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething()" value="11"></td>
<td><input type="text" class="myFieldB" onclick="doSomething()" value="22"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething()" value="33"></td>
<td><input type="text" class="myFieldB" onclick="doSomething()" value="44"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething()" value="55"></td>
<td><input type="text" class="myFieldB" onclick="doSomething()" value="66"></td>
</tr>
</table>
function doSomething() {
//code
}
As you can see I have 3 rows which the same structure. If you click on any input field the function doSomething will call.
Now my question (example): If I click on the input field with the value 44 I would like to get all values of this row (row 2).
The output should be:
- 33
- 44
Can you explain me please how I can realize this? Thank you very much !!
CodePudding user response：
Using Jquery :
$(this).parent().parent(); // Moves up from <input> to <tr>
Then you can access it by looping <td> or by $("#parent :input");
CodePudding user response：
To get all the inputs for a row, you can add the click event to the row itself.
$("tr").click...
then access the inputs with $(this).find(".myFieldA") (etc)
In some cases there may be a td you don't want to have a click event on, so it's easier to add the click event to the cells you do want or to all the cells excluding the ones you don't want:
$("td.click").click...
$("td:not(.noclick)").click...
with the event on the td (or on the input if you prefer) you can access the tr with
var tr = $(this).closest("tr");
If you don't know how many inputs there are and just want an array of values, you can use .map
var values = row.find(":input").map((i,e)=> $(e).val()).toArray();
where row is the tr from previous and .toArray() converts to a "clean" array (useful with console.log)
This can then be extended to give you an array of objects with key/value
var values = row.find(":input").map((i,e)=> {
return {
key : e.className,
value : $(e).val()
}
}).toArray();
If you prefer an object (probably the most useful) rather than a key/value array:
var values = {};
row.find(":input").each((i,e) =>
values[e.className] = $(e).val()
);
CodePudding user response：
Since the click event is bubbling up, you can set a listener on the row instead on each input.
$('table tr').click(doSomething);
function doSomething() {
let vals = [];
$(this).find('input').each(function() {
vals.push(this.value);
});
console.log(vals.join());
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="myFieldA"value="11"></td>
<td><input type="text" class="myFieldB" value="22"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
</tr>
</table>CodePudding user response：
This is pretty simple without adding jQuery.
Add a click event listener on each of your table rows (your trs), then loop through the children (this will be your td elements).
Finally, get the value of each child of your td, then output it:
let rows = document.querySelectorAll('tr');
let results = document.getElementById('results');
rows.forEach((row) => {
row.addEventListener('click', getValues);
});
function getValues() {
let currentRow = event.currentTarget;
let output = [];
// get the children (your td elements) of the currently clicked row
for (let i = 0; i < currentRow.children.length; i ) {
//get the value of the child input element
output.push(currentRow.children[i].firstChild.value);
}
results.innerText= output;
}<table>
<tr>
<td><input type="text" class="myFieldA" value="11"></td>
<td><input type="text" class="myFieldB" value="22"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
</tr>
</table>
<br />
<div id="results">
</div>