Accessing row element of table in Javascript

Question

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()">

You may check http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript to see how to iterate through all rows and than through all columns of the row, where you can check your data etc. — Kimmax, Dec 25 '13 at 11:52

score 1 · Answer 1 · answered Dec 25 '13 at 11:50

1

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];

answered Dec 25 '13 at 11:50

Igor Dymov

15,244
3
46
53

If i there may be more than one `collection`, then can i get correct `collection`. Say there is a `
` also. then how can i match that `document.getElementsByName('collection')[0]` is of type `form` or `table`. Is there any provision for such type checking in js
– Dec 25 '13 at 13:47
Thanks for explaining the actual issue with the cause, this helped me in understanding the concept – Dec 25 '13 at 14:03

score 1 · Accepted Answer · answered Dec 25 '13 at 12:10

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.net/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

I need to pass these id to the servlet, so by displaying id i am making sure that i can fetch the correct id. then i will learn how to pass the data from the html page. I think an ajax call is what i need for making a request to server( but i need to figure it out) — , Dec 25 '13 at 13:41
It worked fairly well, although i encountered one more problem while displaying data in last two lines, but i managed to solve it. Thank you so much for helping. Accepting your answer. — , Dec 25 '13 at 14:02

score 0 · Answer 3 · answered Dec 25 '13 at 13:34

0

actually if you are using jQuery (very recommanded ) 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 compiled.)

answered Dec 25 '13 at 13:34

Ori Refael

2,476
3
27
60

1

I read jQuery is a framework which is build on javascript, so first i need to get sufficient hold on javascript, that is only reason i am learning js concepts first – Dec 25 '13 at 13:42
to be honest, i was started from jQuery..firstable played with fade show and change elements and than moved to more complex functions. i would advice you you to do the same, it worked great for me. :) – Ori Refael Dec 25 '13 at 13:52
Sure, i will definitely consider your opinion too. jQuery is demand of today's world. – Dec 25 '13 at 14:03

Accessing row element of table in Javascript

3 Answers3