如何使用javascript或jquery获取HTML表格单元格数据

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 .

Answer 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();

Answer 2

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