Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question access table cell values in row with checked checkbox?

    I was wondering if anyone could help me with getting this working.

    I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus.

    I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B].

    My code for javascript function and html table are below:

    Code:
    function calculate(textID){
        var table = document.getElementById('course'); //id of table
        var rowCount = table.rows.length;
        var array = []; //array to hold the values
        var c = 0;
    
        dmenus = document.getElementByTagName("select"); //get the drop down menus
    
        for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
            var row = table.rows[a];
            var check = row.cells[0].childNodes[0];
            if(null != check && true == check.checked){
                for(var b = 0; b < dmenus.length; b++){
                    val = dmenus[b].options[dmenus[b].selectedIndex].value;
                    array[c] = val; //set index of array to equal value of dropdown box
                    c++;
                }
            }else{
                b++;
            }
        }
    Html code for table:
    Code:
    <table id="course">
        <tr>
            <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
                <th style="color:white">Course Title</th>
                <th style="color:white">Credits</th>                
                <th style="color:white">Grade</th>
            </tr>
        <tr>
                <td><input type="checkbox" name="tick" id="tick"/></td>
                <td><input type="text"/></td>
                <td>
                    <select name="credits" id="credits">
                        <option...</select></td>
                <td>
                    <select name="grade" id="grade">
                        <option...</td>
    It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks
    Last edited by sophie_pocket; 01-06-2012 at 07:19 PM.

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Finally got it! rearranged code for it below:

    Code:
    var array = [];
    var narray = [];
    var a = 0;
    var b = 0;
    var c = 0;
    				
    ddownselects = document.getElementsByTagName("select");
    
    //get all elements into one array
    for(var j = 0; j<ddownselects.length; j++){
    	val = ddownselects [j].options[els[j].selectedIndex].value;
    	array[a] = val;
    	a++;
    }
    
    var rlen = array.length/2; //number of rows
    for(var i = 1; i<= rlen; i++){
    	var row = table.rows[i];
    	var check = row.cells[0].childNodes[0];
    	if(check.checked){
    		narray[b] = array[c]; //set array values to new array only if that row is checked
    		b++; 
    		c++;
    		narray[b] = array[c];
    		b++;
    		c++;
    
    	}else{
    		c+=2; //if not checked, got to next row's values
    	}
    }
    There's probably a more efficient way of doing it but hey works for me


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •