CODEWITHSUNDEEP
htmlcheckboxhtml-table
user1145581
user1145581

Reputation: 1017

Get row when checking checkbox in html table

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

Upvotes: 5

Views: 63120

Answers (5)

Harutyun Imirzyan
Harutyun Imirzyan

Reputation: 464

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++;
    }
}

Upvotes: 6

captainpoop
captainpoop

Reputation: 1

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");
                }
            }

Upvotes: 0

Prasad
Prasad

Reputation: 1812

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
            {
            }
        });
    })

Upvotes: 0

Mark
Mark

Reputation: 2221

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/

Upvotes: 5

Nickolay Kondratenko
Nickolay Kondratenko

Reputation: 1951

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

Upvotes: 0

Related Questions