get all values of clicked input field row - html

Question

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 !!

Answer 1

var doSomething;
$( document ).ready(function() {
doSomething = function(el) {
const tdInputChild = $(el).parent().parent().find('input');
console.log('myFieldA',$(tdInputChild[0]).val());
console.log('myFieldB',$(tdInputChild[1]).val());
// For Dynamic you can use loop or map to get val.
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething(this)" value="11"></td>
<td><input type="text" class="myFieldB" onclick="doSomething(this)" value="22"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething(this)" value="33"></td>
<td><input type="text" class="myFieldB" onclick="doSomething(this)" value="44"></td>
</tr>
<tr>
<td><input type="text" class="myFieldA" onclick="doSomething(this)" value="55"></td>
<td><input type="text" class="myFieldB" onclick="doSomething(this)" value="66"></td>
</tr>
</table>

Answer 2

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)
$("table tr").click(function() {
console.log($(this).find(".myFieldA").val(), $(this).find(".myFieldB").val());
})
<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>
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");
$("table tr td:not(.noclick)").click(function() {
var row = $(this).closest("tr");
console.log(row.find(".myFieldA").val(), row.find(".myFieldB").val());
})
<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>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
</table>
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)
$("table tr td:not(.noclick)").click(function() {
var row = $(this).closest("tr");
var values = row.find(":input").map((i,e)=> $(e).val()).toArray();
console.log(values)
})
<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>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
</table>
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();
$("table tr td:not(.noclick)").click(function() {
var row = $(this).closest("tr");
var values = row.find(":input").map((i,e)=> {
return {
key : e.className,
value : $(e).val()
}
}).toArray();
console.log(values)
})
<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>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
</table>
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()
);
$("table tr td:not(.noclick)").click(function() {
var row = $(this).closest("tr");
var values = {};
row.find(":input").each((i,e) =>
values[e.className] = $(e).val()
);
console.log(values)
})
<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>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="33"></td>
<td><input type="text" class="myFieldB" value="44"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
<tr>
<td><input type="text" class="myFieldA" value="55"></td>
<td><input type="text" class="myFieldB" value="66"></td>
<td class="noclick">click here doesn't give values</td>
</tr>
</table>

Answer 3

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>

Answer 4

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>