This is my first attempt in Javascript, so may be this is fairly easy question.

I need to access row element of a table, each row contains checkbox and two other column. If checkbox is checked, i need to get the id of checkbox.

I made following attempt but element_table.rows returns undefined, therefore i could not proceed. I debugged using Inspect element tool of eclipse and found element_table contains the rows.

Please suggest where I am making a mistake.

Javascript code:

function myfunction3(){
    var element_table = document.getElementsByName('collection');
    var element_tableRows = element_table.rows;
    var selectedTr = new Array();
    var data = "";
    for(var i =0 ; element_tableRows.length;i++)
    {
        var checkerbox = element_tableRows[i].getElementsByName('checkmark');
        if(checkerbox.checked){
            selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name");
            data = data + element_tableRows[i].getAttribute("name");
        }
    }
    var element_paragraph = document.getElementsByName('description');
    element_paragraph.innerHTML = data;
}

html code:

<table name="collection" border="1px">
    <tr name="1">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Tum hi ho</td>
        <td>Arjit singh</td>
    </tr>
    <tr name="2">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Manjha</td>
        <td>Somesh</td>
    </tr>
    <tr name="3">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Ranjhana</td>
        <td>A.R Rehman</td>
    </tr>
</table>

<input type="button" value="Check" onclick="myfunction3()">

This is my first attempt in Javascript, so may be this is fairly easy question.

I need to access row element of a table, each row contains checkbox and two other column. If checkbox is checked, i need to get the id of checkbox.

I made following attempt but element_table.rows returns undefined, therefore i could not proceed. I debugged using Inspect element tool of eclipse and found element_table contains the rows.

Please suggest where I am making a mistake.

Javascript code:

function myfunction3(){
    var element_table = document.getElementsByName('collection');
    var element_tableRows = element_table.rows;
    var selectedTr = new Array();
    var data = "";
    for(var i =0 ; element_tableRows.length;i++)
    {
        var checkerbox = element_tableRows[i].getElementsByName('checkmark');
        if(checkerbox.checked){
            selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name");
            data = data + element_tableRows[i].getAttribute("name");
        }
    }
    var element_paragraph = document.getElementsByName('description');
    element_paragraph.innerHTML = data;
}

html code:

<table name="collection" border="1px">
    <tr name="1">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Tum hi ho</td>
        <td>Arjit singh</td>
    </tr>
    <tr name="2">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Manjha</td>
        <td>Somesh</td>
    </tr>
    <tr name="3">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Ranjhana</td>
        <td>A.R Rehman</td>
    </tr>
</table>

<input type="button" value="Check" onclick="myfunction3()">

• javascript
• html
• browser
• html-table

Share Improve this question Follow edited May 18, 2017 at 17:47 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 25, 2013 at 11:34 user1707035user1707035 1

• You may check stackoverflow./questions/3065342/… to see how to iterate through all rows and than through all columns of the row, where you can check your data etc. – Kimmax Commented Dec 25, 2013 at 11:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

here's a working version

function myfunction3(){
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for(var i =0 ; i < element_tableRows.length;i++)
{
    var checkerbox = element_tableRows[i].cells[0].firstChild;
    if(checkerbox.checked){
        //selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name"); //not sure what you want with this
        data = data + element_tableRows[i].getAttribute("name");
    }
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}

http://jsfiddle/eZmwy/

jsfiddle for your example, your problem is mainly at when you getElementsByName you need to specify the index, also not that not all getElement methods are available in the table

i would also suggest you learn jQuery, this makes life easier, also not sure why you want to display the data as 1,2,3 the name on the tr... seems pretty strange to me

Actually this line

var element_table = document.getElementsByName('collection');

will return collection of elements. If you are sure that you have exactly one table with the specified name, try this approach:

var element_table = document.getElementsByName('collection')[0];

actually if you are using jQuery (very remanded ) you can do something like

var idsArray = [];
$("[name=collection] tr td [type=checkbox]:checked").parent().each(function() {
idsArray .push($(this).attr('name'))
});

this answer related only to jQuery use (which is same as javascript only more piled.)