Get row when checking checkbox in html table - html

Question

I have a HTML table with a checkbox in one of the columns. I want to know how I could get the row data when the user clicks on the checkbox with javascript (without jquery)? Can anyone please help me with this?
Thanks

Answer 1

HTML DOM solves your problem
<script type="text/javascript">
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i=0;
while (i < cols.length) {
alert(cols[i].textContent);
i++;
}
}
</script>
<table>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
EDIT:
this script will help you more, I think:
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i = 0;
while (i < cols.length) {
var val = cols[i].childNodes[0].nodeValue;
if (val != null) {
alert(val);
}
i++;
}
}

Answer 2

You could try something like this:
HTML:
<table>
<thead>
<tr><th></th><th>Row Text</th></tr>
</thead>
<tr>
<td><input type="checkbox" /></td>
<td>Test</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 3</td>
</tr>
</table>
JavaScript:
checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
alert("My text is: " + secondColumn.textContent );
};
}
JSFiddle: http://jsfiddle.net/markwylde/wzPHF/1/

Answer 3

if your select is in td directly, try the following:
sel.onclick = function(){
row = this.parentNode.parentNode
//then what you need
}
Note that first you have to find sel with either document.getElementById() or document.getElementsByTagName()
Also you may need to handle onchange event instead of onclick

Answer 4

This will give you content of row directly(all td in tr)
HTML:
<table>
<tr id="tr1">
<td>
<input type="checkbox" value="chkbox1" id="chk1">
</td>
<td>
Lorem ipsum text
</td>
</tr>
<tr id="tr2">
<td>
<input type="checkbox" value="chkbox2" id="chk2">
</td>
<td>
Lorem ipsum text
</td>
</tr>
</table>
Jquery:
$(document).ready(function(){
$('#chk1, #chk2').on('change',function(){
if($('#chk1').prop('checked') || $('#chk2').prop('checked'))
{
var ids=$(this).parent().parent().html();
alert(ids);
}
else
{
}
});
})

Answer 5

if you're new :
onChange EVENT of the checkbox will call the function that i named "checking"
it will send "This.checked", which means, will send True or false to the function "checking", Then i go in the function get that True or False that was sent, and put it in a variable i called "temp".
HTML: onchange="checking(this.checked)" <--- sending out : "This.checked" ( This = the object that creates the Event onchange, and .checked, is the propriety)
you could even send multiple info like this : onchange="checking(this.checked,this.id)" and so on.
JAVASCRIPT :function checking(temp) <--- this is how it gets the "this.checked" in HTML, and put it in the variable temp.
to receive multiple infos : function checking(temp,temp2) and so on.(name it like you want)
then i run a 'IF' with the variable "temp" and if the value of it = true, then do alert.
Hope it helps, think about it and work it so it fits what you need !
HTML :
<table>
<tr>
<td>
<input type="checkbox" value=""onchange="checking(this.checked)">
</td>
<td>
<label>Something Here</label>
</td>
</tr>
</table>
JAVASCRIPT :
function checking(temp)
{
if(temp == true)
{
alert("Checkbox is checked");
}
else
{
alert("Checkbox is NOT checked");
}
}