How to get HTML table cell data using javascript or jquery

Question

I want to extract table cell data using javascript/jquery.

Table cell structure:

<select id="id_item_set-0-type" name="item_set-0-type" onchange="get_names_list(this)" required="required">
    <option value="">SELECT</option>
    <option value="GOLD" selected="selected">GOLD</option>
    <option value="SILVER">SILVER</option>
</select>

jquery Function:

$( document ).ready(function() {
    var table_id = document.getElementById('item_grid');
    var rows_len = table_id.rows.length-2;
    for(var i=1; i <= rows_len; i++){
        var e = table_id.rows[i].cells[0].firstChild;
        alert(table_id.rows[i].cells[0].innerHTML);
        var item_type = e.options[e.selectedIndex].text;
    }
});

If i use table_id.rows[i].cells[0].innerHTML i get cell html but i want to get selected option value. I tried e.options[e.selectedIndex].text but it is throwing error e.selectedIndex is undefined. How do i get the selected option value.?

Their are actually Two select tags

<select id="id_item_set-0-name" name="item_set-0-name" required="required">
<option value="">SELECT</option>
<option value="1" selected="selected">Name1</option>
<option value="2">name2</option>
..............
</select>

And i have to extract selected values of both. For example : item_type = "GOLD" and item_name = "name1" Their can be any number of rows that i have to iterate. And have to get values of both item_type and item_name.

table_id.rows[i].cells[0].children[0].value

dandavis
– dandavis

2014-11-19 07:33:42 +00:00
Commented Nov 19, 2014 at 7:33 — dandavis
– dandavis, Commented Nov 19, 2014 at 7:33
item type is first cell and item_name is second cell.

Vaibhav Jain
– Vaibhav Jain

2014-11-19 07:46:28 +00:00
Commented Nov 19, 2014 at 7:46 — Vaibhav Jain
– Vaibhav Jain, Commented Nov 19, 2014 at 7:46

amit_183 · Accepted Answer · 2014-11-19 07:35:25Z

1

try this:

$( document ).ready(function() {
    var selected_val= $('#"id_item_set-0-type :selected"').val();
    var selected_text=$('#"id_item_set-0-type :selected"').text();
}

answered Nov 19, 2014 at 7:35

amit_183

9813 gold badges19 silver badges36 bronze badges

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

2 Comments

Vaibhav Jain Over a year ago

Id can be changed is created dynamically from server side. Not hard coded.

Vaibhav Jain Over a year ago

Can you tell me how can i replace dynamically fetched cell id . What i mean is i have item_type cell id stored in variable item_type_id. Now i want to use that id in $('#"id_item_set-0-type :selected"').val();. Now besides string concatenating is their another way??

Rahul Desai · Accepted Answer · 2014-11-19 07:39:20Z

1

Why are you confusing select tags with table tags?

All you need is:

$('#id_item_set-0-type').find(":selected").text();

add it inside your .ready() function.

If your ID is dynamically generated at server side and if that is the only select statement you have, use:

$('select').find(":selected").text();

edited Nov 19, 2014 at 7:39

answered Nov 19, 2014 at 7:33

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Collectives™ on Stack Overflow

How to get HTML table cell data using javascript or jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related