gautam_reddyc
asked on
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.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_3' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_4' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></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.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_3' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_4' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></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("t ab"+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,vtLin eNum,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.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_4' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_5' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
</table>
How do I work in reordering, specifically keeping in mind this successive row issue??
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
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_3' ><td>3</td><td>three</td><
<tr id='tabRow_4' ><td>3</td><td>three</td><
</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
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_3' ><td>3</td><td>three</td><
<tr id='tabRow_4' ><td>3</td><td>three</td><
</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("t
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,vtLin
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
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_4' ><td>3</td><td>three</td><
<tr id='tabRow_5' ><td>3</td><td>three</td><
</table>
How do I work in reordering, specifically keeping in mind this successive row issue??
ASKER
well I have done that!! I am able to reassign IDs to all the existent rows, but the problem lies with the inserted row. It would carry an ID of where it was inserted at. So if it is inserted after 3rd, it takes id = tabRow_3, and there would be two rows having same ID. I am unable to change these two rows, rest of the rows are working good!
Did you have the id (re)adjustment occur after the insertion?
ASKER
Yes, I am unable to change only for rows which would have the same row ID, as both of them get changed. If I insert a row after row 2, I would get the below mentioned.
<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_2' ><td>2</td><td>two</td><td ><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_4' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
<tr id='tabRow_5' ><td>3</td><td>three</td>< td><input type='button' name='but' onclick="getRowId(this.par entNode.pa rentNode.i d)"/></td> </tr>
</table>
The problem is I should get id ='tab_row3' for the third row
<table id='tab'>
<tr id='tabRow_1' ><td>1</td><td>one</td><td
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_2' ><td>2</td><td>two</td><td
<tr id='tabRow_4' ><td>3</td><td>three</td><
<tr id='tabRow_5' ><td>3</td><td>three</td><
</table>
The problem is I should get id ='tab_row3' for the third row
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hey thanks!! got it myself using row.rowIndex. Appreciate your effort!! you code worked too!!
Thanks for the grade & points.
Good luck & have a great day.
Good luck & have a great day.
- locate all of the rows in the table:
Open in new window