Insert a row at a specific index and reorder other rows.

Hello I have to insert a row at a specific position.  After insert, I would have to reorder the rows and change the ids of elements inside the rows.

The problem I am having is, I am able to change ids for all the elements but for the element just successive to it.

<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_3' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_4' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
</table>

So if I add a new row at position 2, I would have a table that would look similar to this

<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_3' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_4' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
</table>

To tackle this problem, I am passing in the row number where the row is added, i.e vtLineNum,  and am passing all the rows in the table. Matching them to where the row number is greater than line num, the change would take place.

var elems = document.getElementById("tab"+vtName).rows;
      for(var i in elems)
      {
            if(elems[i].id !==null && elems[i].id !=='' && elems[i].id !=null)
            {
            v = explodeArray(elems[i].id,'_');
                  if(Number(v[1])>=vtLineNum)
                  {      
                  getRowDataAdd(vtName,vtLineNum,elems[i].id);
                  lineNum = Number(v[1])+ 1;                  
                  elems[i].id = v[0] +'_'+ lineNum;
                  rowStyle = (lineNum % 2 == 1) ? "on" : "off";
                  elems[i].className = "row_" + rowStyle;            
                  }
            }
      }

Everything is working fine now, but I would have two identical rows where row insertion occurs, the reason being I am making sure only rows greater than the number passed would only be changed. So I have a table looking like this.


<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_4' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_5' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
</table>

How do I work in reordering, specifically keeping in mind this successive row issue??
gautam_reddycAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hieloConnect With a Mentor Commented:
>> tblBody.rows[i].id=tblBody.rows[i].id.replace(/\d+$/,i);
that should have i+1 at the end:

 tblBody.rows[i].id=tblBody.rows[i].id.replace(/\d+$/,i+1);
0
 
hieloCommented:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>

<script language="JavaScript" type="text/javascript">
function insertAfter( referenceNode, newNode )
{
    referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}
function addRow(tableID,row)
{
  var tblBody = document.getElementById(tableID).tBodies[0];
  var newNode = tblBody.rows[row].cloneNode(true);
  insertAfter(tblBody.rows[row],newNode )
  var i=row,limit=tblBody.rows.length;
  while( ++i<limit)
  {
	tblBody.rows[i].id=tblBody.rows[i].id.replace(/\d+$/,i);
	//assuming you want to update the row number of the first column/cell
	tblBody.rows[i].cells[0].innerHTML= 1+i;
  }
}

function getRowId(id){
	id=id.split('_').pop()-1;
	addRow('tab',id);
}  

</script>

	</head>
	<body>
<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_3' ><td>3</td><td>three</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
<tr id='tabRow_4' ><td>4</td><td>four</td><td><input type='button' name='but' onclick="getRowId(this.parentNode.parentNode.id)"/></td></tr>
</table>
	</body>
</html>

Open in new window

0
 
gautam_reddycAuthor Commented:
Hielo could you please check, if it is giving you the id>> tabRow_1 twice?? rest all are working fine, but for the first one?? Please let me know you have the same problem.
0
 
gautam_reddycAuthor Commented:
Hielo, we would get same row ID for not just 1st row but for any row that is clicked the first time.
0
 
gautam_reddycAuthor Commented:
wonderful!! thanks mate!
0
All Courses

From novice to tech pro — start learning today.