0

In the main table there are two sub tables are there.when user click addRow button
main row and also subrow should be created.i have written the code but when i click addrow alignment is missing and apart from that mainrow and subrow is not displaying properly.

<html>
<head>
<script>
function addrow(){
  theTabs = document.getElementById('main');
  newRow = document.createElement('tr');


  snonewCell = document.createElement('td');
  snonewCell.innerHTML=theTabs.rows.length;

  newRow.appendChild(snonewCell );


  enonewCell = document.createElement('td');
  enonewCell.innerHTML="<input type='text'>";

  newRow.appendChild(enonewCell );


  enamenewCell = document.createElement('td');
  enamenewCell.innerHTML="<input type='text'>";

  newRow.appendChild(enamenewCell  );

alert(theTabs.rows.length)
  document.getElementById('sub').rows[theTabs.rows.length-1].appendChild(newRow);


//sub table


  newRow1 = document.createElement('tr');


  subsnonewCell = document.createElement('td');
  subsnonewCell.innerHTML=theTabs.rows.length;

  newRow.appendChild(subsnonewCell );


  subpartynewCell = document.createElement('td');
   subpartynewCell.innerHTML="<input type='text'>";

  newRow1.appendChild( subpartynewCell );


document.getElementById('main').insertBefore(newRow1,newRow);

}


</script>
</head>
<body>
<table>
     <tr>
          <td>
               <table border="1" id="main">
                    <tr>
                         <td>
                                 SNO
                         </td>
 			<td>
                                 EMPNO
                         </td>
			<td>
                                 EName
                         </td>
			 <td>
                                  &nbsp;
                         </td>
                    </tr>
                    <tr>
			<td>
                                 1
                         </td>
                         <td>
                                 <input type='text'>
                         </td>
			<td>
                                 <input type='text'>
                         </td>
                         <td>
                             <input type='button' value='add11' onclick="addrow()">
                         </td>
                    </tr>
               </table>

          </td>
     </tr>



<tr>
          <td>
               <table border="1" id="sub">
                    <tr>
			 <td>
                                 &nbsp; &nbsp; &nbsp; &nbsp;
                         </td>
			 <td>
                                 Sno
                         </td>
                         <td>
                                 Party
                         </td>
</tr>

		<tr>
 			<td>
                                 &nbsp;
                         </td>
			 <td>
                                1
                         </td>
                   
                         <td>
                                 <input type='text'>
                         </td>
                    
                         <td>
                               <input type='button' value='add'>
                         </td>
                    </tr>
               </table>
          </td>
     </tr>


</table>
</body>
</html>
3
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by azegurb
0

Your code mixes properties of 'main' with references to 'sub'.

This

theTabs = document.getElementById('main')
    newRow = theTabs.insertRow(theTabs.rows.length)

    snonewCell = document.createElement('td');
    snonewCell.innerHTML = theTabs.rows.length-1;
    newRow.appendChild(snonewCell);

    enonewCell = document.createElement('td');
    enonewCell.innerHTML = "<input type='text'>";
    newRow.appendChild(enonewCell);

    enamenewCell = document.createElement('td');
    enamenewCell.innerHTML = "<input type='text'>";
    newRow.appendChild(enamenewCell);

fixes the first part.

Make the code for the second part similar.

Edited by fxm: n/a

0
<script>


function addRow(obj)
{

 maintbl=document.getElementById('mainTable');

//inserting labels for mainRow

 var lastRow = maintbl.rows.length;

var mainNum=parseInt(obj.parentNode.parentNode.id.substring(12))+1;
//alert(mainNum);

var row = maintbl.insertRow(lastRow);

var cellremoveRow = row.insertCell(0);
cellremoveRow.innerHTML="&nbsp;";

var cellSno = row.insertCell(1);
cellSno.innerHTML="Sno";
cellSno.align = "center";
cellSno.style.fontWeight = "bold";

var cellEmpno = row.insertCell(2);
cellEmpno.innerHTML="ENo";
cellEmpno.align = "center";
cellEmpno.style.fontWeight = "bold";

var cellEname = row.insertCell(3);
cellEname.innerHTML="EName";
cellEname.align = "center";
cellEname.style.fontWeight = "bold";


var cellAddRow = row.insertCell(4);
cellAddRow.innerHTML="&nbsp;";

//end labels for mainRow

 var lastRow = maintbl.rows.length;

var mainNum=parseInt(obj.parentNode.parentNode.id.substring(12))+1;
//alert(mainNum);

var row = maintbl.insertRow(lastRow);
row.id="mainRowTRID_"+mainNum;

//alert("mainrowid="+row.id);


var iteration = lastRow;

var cellremoveRow = row.insertCell(0);
cellremoveRow.innerHTML="<input type='button' value='-' onClick='removeMainRow(this);'>";

var cellSno = row.insertCell(1);
cellSno.innerHTML=iteration;

var cellEmpno = row.insertCell(2);
cellEmpno.innerHTML="<input type='text' name='Eno'  value=''>";

var cellEname = row.insertCell(3);
cellEname.innerHTML="<input type='text' name='Ename'  value=''>";

var cellAddRow = row.insertCell(4);

//subtable starts


//inserting labels for subRow

 var lastRow = maintbl.rows.length;

var mainNum=parseInt(obj.parentNode.parentNode.id.substring(12))+1;
//alert(mainNum);

var row = maintbl.insertRow(lastRow);

var cellremoveRow2 = row.insertCell(0);
cellremoveRow2.innerHTML="&nbsp;";

var cellSno2 = row.insertCell(1);
cellSno2.innerHTML="&nbsp;";

var cellEmpno2 = row.insertCell(2);
cellEmpno2.innerHTML="SNo";
cellEmpno2.align = "center";
cellEmpno2.style.fontWeight = "bold";


var cellEname2 = row.insertCell(3);
cellEname2.innerHTML="PartyName";
cellEname2.align = "center";
cellEname2.style.fontWeight = "bold";


var cellAddRow2 = row.insertCell(4);
cellAddRow2.innerHTML="&nbsp;";

//end labels for subRow


var lastRow1 = maintbl.rows.length;
var subrow = maintbl.insertRow(lastRow1);

subrow.id="subRowTRID_"+mainNum+"_1";
//alert("subrow.id="+subrow.id);


var cellempty = subrow.insertCell(0);
cellempty.innerHTML="&nbsp;";


var cellSubremoveRow = subrow.insertCell(1);
cellSubremoveRow.innerHTML="&nbsp;";


var cellSubSno = subrow.insertCell(2);
cellSubSno.align="right";
cellSubSno.innerHTML=1;

var cellSubEmpno = subrow.insertCell(3);
cellSubEmpno.innerHTML="<input type='text' name='C'  value=''>";



var cellSubEname = subrow.insertCell(4);
cellSubEname.innerHTML="<input type='button' value='subadd' onClick='subRow(this);'>";



trele= document.getElementsByTagName("tr");

var finalrow=0;
var j=1;

for(var i = 1; i <= trele.length; i++) {
	if(document.getElementById("mainRowTRID_"+i) != null)
	{
	maintbl.rows[document.getElementById("mainRowTRID_"+i).rowIndex].cells[4].innerHTML = '';
	maintbl.rows[document.getElementById("mainRowTRID_"+i).rowIndex].cells[1].innerHTML =j;
	finalrow=document.getElementById("mainRowTRID_"+i).rowIndex;
	j++;
	}

}

maintbl.rows[finalrow].cells[4].innerHTML="<input type='button' value='add' onClick='addRow(this);'>";
// reIndexRows();

}





function subRow(obj)
{

maintbl=document.getElementById('mainTable');

var rowIndex =obj.parentNode.parentNode.rowIndex;

var subrow = maintbl.insertRow(rowIndex+1);

subRowId= obj.parentNode.parentNode.id;
var num=parseInt(subRowId.substring(13))+1;
subrow.id= subRowId.substr(0, 13) + num;

alert("subrow.id="+subrow.id);


var cellempty = subrow.insertCell(0);
cellempty.innerHTML="&nbsp;";


var cellSubremoveRow = subrow.insertCell(1);
cellSubremoveRow.innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";

var cellSubSno = subrow.insertCell(2);
cellSubSno.align="right";
cellSubSno.innerHTML=num;

var cellSubEmpno = subrow.insertCell(3);
cellSubEmpno.innerHTML="<input type='text' name='C'  value=''>";

var cellSubEname = subrow.insertCell(4);

trele= document.getElementsByTagName("tr");


var finalrow=0;

mainRowId=subRowId.substring(11,12);
//alert(mainRowId);


for(var i = 1; i <= trele.length; i++) {
	if(document.getElementById("subRowTRID_"+mainRowId+"_"+i) != null)
	{
		maintbl.rows[document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex].cells[4].innerHTML = '';
		finalrow=document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex;
	}

}

maintbl.rows[finalrow].cells[4].innerHTML="<input type='button' value='subadd' onClick='subRow(this);'>";

}



//Removing mainRows

function removeMainRow(theRow){

var maintbl=document.getElementById('mainTable');

subRowId= theRow.parentNode.parentNode.id;
//alert(subRowId)

mainRowId=subRowId.substring(12);
//alert(subRowId);

index= theRow.parentNode.parentNode.rowIndex;



   maintbl.deleteRow(theRow.parentNode.parentNode.previousSibling.rowIndex);
   maintbl.deleteRow(theRow.parentNode.parentNode.nextSibling.rowIndex);
   maintbl.deleteRow(theRow.parentNode.parentNode.rowIndex);

   trele= document.getElementsByTagName("tr");

for(var i = 0; i < trele.length; i++) {
	if(document.getElementById("subRowTRID_"+mainRowId+"_"+i) != null)
	{
	//alert("mainRowId="+mainRowId+"..i="+i)
      maintbl.deleteRow(document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex);

	}

}

//starting

   var finalrow=0;
   var m=1;


  maintrele= document.getElementsByTagName("tr");

for(var i = 1; i <= maintrele.length; i++) {

	if(document.getElementById("mainRowTRID_"+i) != null)
	{
       n=1;
	   maintbl.rows[document.getElementById("mainRowTRID_"+i).rowIndex].cells[4].innerHTML = '';
	   maintbl.rows[document.getElementById("mainRowTRID_"+i).rowIndex].cells[1].innerHTML = m;
	   finalrow=document.getElementById("mainRowTRID_"+i).rowIndex;

           subtrele= document.getElementsByTagName("tr");

			  for(var j = 1; j <= subtrele.length; j++) {

			if(document.getElementById("mainRowTRID_"+i) != null && document.getElementById("subRowTRID_"+i+"_"+j) != null)
				{
			 	  //Reinitializing sub Row Id
					maintbl.rows[document.getElementById("subRowTRID_"+i+"_"+j).rowIndex].id="subRowTRID_"+m+"_"+n;
					n++;
				
				} //subele if loop

			} //subele for loop

    	//Reinitializing main Row Id
        maintbl.rows[document.getElementById("mainRowTRID_"+i).rowIndex].id="mainRowTRID_"+m;
		m++;

	}//mainele if loop

} //mainele for loop

maintbl.rows[finalrow].cells[4].innerHTML="<input type='button' value='add' onClick='addRow(this);'>";

}

//Removing  subRows

function removeRow(theRow){

var maintbl=document.getElementById('mainTable');

subRowId= theRow.parentNode.parentNode.id;
//alert(subRowId)

mainRowId=subRowId.substring(11,12);
//alert(mainRowId);


index= theRow.parentNode.parentNode.rowIndex;
maintbl.deleteRow(index);

trele= document.getElementsByTagName("tr");

var finalrow=0;
var j=1;

for(var i = 1; i <= trele.length; i++) {
	if(document.getElementById("subRowTRID_"+mainRowId+"_"+i) != null)
	{
		maintbl.rows[document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex].id="subRowTRID_"+mainRowId+"_"+j;
		j++;
	}

}

trele= document.getElementsByTagName("tr");
var finalrow=0;
var j=1;

for(var i = 1; i <= trele.length; i++) {
	if(document.getElementById("subRowTRID_"+mainRowId+"_"+i) != null)
	{
		maintbl.rows[document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex].cells[4].innerHTML = '';
		maintbl.rows[document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex].cells[2].innerHTML = j;
		finalrow=document.getElementById("subRowTRID_"+mainRowId+"_"+i).rowIndex;
		j++;
	}

}

maintbl.rows[finalrow].cells[4].innerHTML="<input type='button' value='subadd' onClick='subRow(this);'>";
//reIndexRows();

}



</script>
<body>
<form>
<table border="1" width='60%' id="mainTable">
<tr>
<td>
&nbsp;
</td>
<td>
<b>SNo
</td>
<td>
<b>ENo
</td>
<td>
<b>EName
</td>
<td>
&nbsp;
</td>
</tr>
<tr id="mainRowTRID_1">
<td>
&nbsp;
</td>
<td>
1
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="BUTTON" value="add" onclick='addRow(this)'>
</td>
</tr>


<!--------- sub table  ------------->

<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td align="right">
<b>SNo
</td>
<td>
<b>PartyName
</td>
<td>
&nbsp;
</td>
</tr>

<tr id="subRowTRID_1_1" name="subRowTRID">
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td align="right">
1
</td>
<td>
<input type="text">
</td>
<td>
<input type="BUTTON" value="subadd" onClick='subRow(this);'>
</td>
</tr>
</table>
</form>
</body>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.