javascript - Expanding table in html cannot be displaying in a table format -

javascript - Expanding table in html cannot be displaying in a table format -

i trying expanding/growing table in html page.. created expanding table , able insert , retrieve info in table.. when tried view table shows first line of growing table.

i want show table whatever rows there in table.. please help me code..

//html <table id="1.1.2"> <td>1.1.2 board members-overview<td></tr> <tr> <th>s.no.</th> <th>name</th> <th>area of specification</th> <th>committees involved in</th> <td></td> </tr> <tr> <td> 1 </td> <td> <input type="text" id="1.1.2_1_1" maxlength="50"><br> </td> <td> <input type="text" id="1.1.2_1_2" maxlength="50"><br> </td> <td> <input type="text" id="1.1.2_1_3" maxlength="50"><br> </td> <td> <a href="javascript:void(0);" id="addnew" onclick="addmain(1)"><img style=" padding-left: 12px;" src="./images/plus.png" /></a> </td> </tr> </table>

//script

<script type="text/javascript"> var main=1; var secrows=0; var flag=0; var sumnewfam=0; function addmain(i) { console.log(i); var i=i+1; var table = document.getelementbyid("1.1.2"); var rows = table.getelementsbytagname('tbody')[0].getelementsbytagname('tr').length; rows=rows-1; var row = table.insertrow(-1); var cell1 = row.insertcell(0); var cell2 = row.insertcell(1); var cell3 = row.insertcell(2); var cell4 = row.insertcell(3); var cell12= row.insertcell(4); // add together text new cells: cell1.innerhtml = i; cell2.innerhtml = '<input type="text" name="1.1.2_'+i+'_1" id="1.1.2_'+i+'_1" maxlength="50" style="padding:0px;width:200px;"/><br/><span id="indreg_fullname'+i+'_errorloc" class="error"></span>'; cell3.innerhtml = '<input type="text" name="1.1.2_'+i+'_2" id="1.1.2_'+i+'_2" maxlength="50" style="padding:0px;width:200px;"/><br/><span id="indreg_fullname'+i+'_errorloc" class="error"></span>'; cell4.innerhtml = '<input type="text" name="1.1.2_'+i+'_3" id="1.1.2_'+i+'_3" maxlength="50" style="padding:0px;width:200px;"/><br/><span id="indreg_fullname'+i+'_errorloc" class="error"></span>'; cell12.innerhtml = '<a href="javascript:void(0);" id="addnew" onclick="addmain('+i+')"><img style=" padding-left: 12px;" src="./images/plus.png" /></a> <a href="javascript:void(0);" id="remnew" onclick="remvmain('+i+')"><img style=" padding-left: 12px;" src="./images/close.png" /></a>'; if(flag!=0){ if(secrows!=0){ rows=rows-secrows; rows=rows+1; flag=0; } } var row = table.rows[rows]; row.deletecell(4); document.getelementbyid("maincount").value=i; i++; homecoming false; } function remvmain(i) { console.log(i); var table = document.getelementbyid("1.1.2"); var rows = table.getelementsbytagname('tbody')[0].getelementsbytagname('tr').length; i=i-1; var n=i*5; if( > 1 ) { rows = rows - 1; var row = table.deleterow(rows); rows = rows - 1; row = table.rows[rows]; var m=n/5; var type=document.getelementbyid("fullname"+n); if(type == null){ var x = row.insertcell(4); x.innerhtml = "<a href='javascript:void(0);' id='addnew' onclick='addmain("+m+")'><img style='padding-left: 12px;' src='./images/plus.png' /></a> <a href='javascript:void(0);' id='remnew' onclick='remvmain("+m+")'><img style='padding-left: 12px;' src='./images/close.png'/></a>"; } else { var val = parseint(document.getelementbyid("fullname"+n).value); var fellow member = document.getelementbyid("families").value; var last2 = member.slice(-2); var secondary = parseint(document.getelementbyid("family")); rows=rows-val-1; row = table.rows[rows]; var x = row.insertcell(4); flag=1; x.innerhtml = "<a href='javascript:void(0);' id='addnew' onclick='addmain("+m+")'><img style='padding-left: 12px;' src='./images/plus.png' /></a> <a href='javascript:void(0);' id='remnew' onclick='remvmain("+m+")'><img style='padding-left: 12px;' 'src='./images/close.png' /></a>"; } } else { rows = rows - 1; var row = table.deleterow(rows); rows = rows - 1; row = table.rows[rows]; var x = row.insertcell(4); x.innerhtml="<a href='javascript:void(0);' id='addnew' onclick='addmain("+i+")'><img style='padding-left: 12px;' src='./images/plus.png'/></a>"; } document.getelementbyid("maincount").value=i; homecoming false; } </script>

//jquery

$("#viewdata").click(function() { var year=$("#year").val(); //alert(year); $('#showdata').find('input:text').each(function(){ var fid=$(this).attr('id'); $.get("/bankprofile/selectgrow/"+year,function(data){ var obj = jquery.parsejson(data); console.log(obj)); });

javascript html table