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 stackoverflow.com/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
– Kimmax, Commented Dec 25, 2013 at 11:52

ah-shiang han · Accepted Answer · 2013-12-25 12:10:48Z

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

answered Dec 25, 2013 at 12:10

ah-shiang han

3301 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1707035 Over a year ago

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)

ah-shiang han Over a year ago

does this answer your question? or what else do you need?

user1707035 Over a year ago

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.

Igor Dymov · Accepted Answer · 2013-12-25 11:50:02Z

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, 2013 at 11:50

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

2 Comments

user1707035 Over a year ago

If i there may be more than one collection, then can i get correct collection. Say there is a <form name="collection"> 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

user1707035 Over a year ago

Thanks for explaining the actual issue with the cause, this helped me in understanding the concept

Ori Refael · Accepted Answer · 2013-12-25 13:34:54Z

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, 2013 at 13:34

Ori Refael

3,0264 gold badges42 silver badges71 bronze badges

3 Comments

user1707035 Over a year ago

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

Ori Refael Over a year ago

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. :)

user1707035 Over a year ago

Sure, i will definitely consider your opinion too. jQuery is demand of today's world.

Collectives™ on Stack Overflow

Accessing row element of table in Javascript

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related