how to addrow after subRow when you have multiple tables

Question

chaituu 0 Newbie Poster

14 Years Ago

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>

javascript

3 Contributors
5 Replies
107 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by azegurb

fxm 23 Posting Pro

14 Years Ago

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 14 Years Ago by fxm because: n/a

azegurb 1 Posting Whiz in Training

14 Years Ago

hi
can you post it here
thank you very much

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chaituu 0 Newbie Poster · Answer 1 · 2010-06-23T11:34:09+00:00

I have implemented as per the requirement.if anybody wants i will post it.

chaituu 0 Newbie Poster · Answer 2 · 2010-06-29T15:17:27+00:00

<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>

azegurb 1 Posting Whiz in Training · Answer 3 · 2010-06-29T15:52:27+00:00

azegurb 1 Posting Whiz in Training

14 Years Ago

thank you for attention