CODEWITHSUNDEEP
javascriptdrop-down-menuhtml-table
Sophie Pocket
Sophie Pocket

Reputation: 87

How to iterate through a table for values of drop down menus?

I wish to get the values for the 3rd and 4th cell of each row where these contain drop down menus. I've tried various ways but my code doesn't seem to iterate through rows of a table. I can get the values for the first row, but not the rest. There's isn't a fixed row size for the table as the user will be able to add and delete them.

I've put the values in separate arrays but instead of the array containing say [10, 20] it contains [10, 10] as it just duplicates the first row's values.

Here's my code that I have so far: 

function calculate(){
    var len = document.getElementById(arguments[1]).rows.length;
    var cMenus = [];
    var gMenus= [];
    for(var j = 1; j<len; j++){
        for(var i = 2; i<arguments.length; i++){
            var c = document.getElementById(arguments[2]);
            var g = document.getElementById(arguments[3]);

            cMenus[a] = c.options[c.selectedIndex].value;
            gMenus[a] = g.options[g.selectedIndex].value;   
        }
        a++;
    }

<button type="button" onclick="calculate('text','course', 'credits', 'grade')">Calculate</button>

HTML Code for first dropdown menu:

<table id="course" summary="add/remove course details" width="350px" border="1">

    <td>
        <select name="credits" id="credits">
            <option value="10">10</option>
            <option value="20">20</option>
        </select>   
    </td>...

I've tried adding j to the arguments or putting it in "[]" but nothing seems to work. I don't think the platform I'm using supports jQuery, so help would be really appreciated for using Javascript.

Upvotes: 2

Views: 2110

Answers (1)

Amit Patil
Amit Patil

Reputation: 3067

Now its much clear...u have tds and select box inside it. Below code will iterate through each table cell and can give u selected value in select box, 

$(".grid").find("td").each(function(i){
   //alert("This is "+parseInt(i+1)+"th TD");
   alert($(this).find("select").val());
 });

If you want to select all/perticular column then use below code

 $(".grid tr").each(function(i){
   colValues[i] = $('tr:nth-child('+(i+1)+')>td:nth-child(1)').html();
 });

For more info read http://www.amitpatil.me/table-manipulation-with-jquery/

Upvotes: 1

Related Questions