Replace content of a column in html table

Question

I have a table with 3 columns and each of them have radio buttons (varying in number) based on the selected radio button the radio buttons for next column is shown. I started coding this manually with jQuery and it started getting messy. Ex: if i chose Mathematics It will show 5 categories, so here we need 3 additional rows. If i choose puzzles say there is only 3 categories so we have to remove 2 rows.

A small snippet from my code

var rows=$j('#gradeTable tr').length-1;
            var count=0;
            if(isParent==='true'){
                //If its a parent we are not rendering on table.But for child we have to 
            }
            else{
                for(var i=0;i<rows;i++){
                    count++;
                    var sel='#gradeTable tr:nth-child('+(i+2)+') td:nth-child(2)';
                    $j(sel).replaceWith(tds[i]);

                }
                console.log(data.length+'=================c'+count);
                if(count<data.length){
                    html='';
                    for(var i=count;i<data.length;i++){
                        html+='<tr><td></td>'+tds[count]+'<td></td><td></td></tr>'
                    }
                    $j("#gradeTable").append(html);
                }
            }

tds[] is an array of data to be rendered to second column.

Am i overengineering or is there a simpler way to do this. Can i use jQuery Datatable for this ?

Answer 1

I used jQuery Data Table and used 3 arrays to store grade, subject and category. And created the dataset dynamically and provided to DataTable. This is far less complex than what I was trying to do.