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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
What you can do, as part of the row insertion process, is:

- locate all of the rows in the table:

var table; = document.getElementById( 'tab' )
  if ( table ) {
    var rows = table.rows;
    ... Then, here, you can iterate over all of the rows, assigning/reassigning the id attribute
    ... for each TR element...
  } else {
    alert( 'Error - document element not found. id="tab"' );
  }

Open in new window

0
gautam_reddycAuthor Commented:
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!
0
HonorGodSoftware EngineerCommented:
Did you have the id (re)adjustment occur after the insertion?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

gautam_reddycAuthor Commented:
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.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>

The problem is I should get id ='tab_row3' for the third row
0
HonorGodSoftware EngineerCommented:
Something like this maybe?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Add/Delete Row with row id adjustment </title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id )
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '"' )
    }
    return ele
  }

  function Adjust() {
    var table = field( 'here' );
    if ( table ) {
      if ( table && table.nodeName == 'TABLE' ) {
        var rows = table.rows;
        for ( var r = 0; r < rows.length; r++ ) {
          var row = rows[ r ];
          var id  = row.id || 'unknown';
          row.id  = 'row_' + r;
          alert( 'before: ' + id + '\n after: ' + row.id );
        }
      } else {
        alert( 'Unexpected element type="' + table.nodName + '".' );
      }
    } else {
      alert( 'Element not found. id="tab".' );
    }
  }

  function AddRow() {
    var temp   = field( 'template' )
    var target = field( 'target' )
    if ( temp && target ) {
      if ( ( temp.nodeName == 'TR' ) && ( target.nodeName == 'TBODY' ) )  {
        target.appendChild( temp.cloneNode( true ) )
      } else {
        alert( 'AddRow() - configuration error.\ntemplate row type = "' + temp.nodeName + '"\nTarget TBODY type = "' + target.nodeName + '"' )
      }
    }
  }

  function After( target ) {
    var temp = field( 'template' )
    target.checked = false;
    if ( temp && target ) {
      while ( target && target.nodeName != 'TR' ) {
        target = target.parentNode;
      }
      if ( temp.nodeName == 'TR' ) {
        target.parentNode.insertBefore( temp.cloneNode( true ), target.nextSibling );
        Adjust();
      } else {
        alert( 'AddRow() - configuration error.\ntemplate row type = "' + temp.nodeName + '"\nTarget TBODY type = "' + target.nodeName + '"' )
      }
    }
  }

  function Before( target ) {
    var temp = field( 'template' )
    target.checked = false;
    while ( target && target.nodeName != 'TR' ) {
      target = target.parentNode;
    }
    if ( temp.nodeName == 'TR' ) {
      target.parentNode.insertBefore( temp.cloneNode( true ), target );
      Adjust();
    } else {
      alert( 'TR not found.' )
    }
  }

  function DelRow( obj ) {
//  alert( 'DelRow() -> ' + obj.nodeName )
    var tr = obj
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode
    }
    if ( tr ) {
      tr.parentNode.removeChild( tr )
      Adjust();
    } else {
      alert( 'TR not found.' )
    }
  }
</script>
</head>
<body>

</head>
<body onload='AddRow()'>

  <div style='display:none'>
    <table>
      <tbody>
        <tr id='template'>
         <td>
           <input id='remove' onclick='DelRow(this)' type='checkbox' />
         </td>
         <td>
           <input id='after'  onclick='After(this)' type='checkbox' />
         </td>
         <td>
           <input id='before' onclick='Before(this)' type='checkbox' />
         </td>
         <td>
           <input name='col1' type='text' value='' />
         </td>
         <td>
           <input name='col2' type='text' value='' />
         </td>
        </tr>
      </tbody>
    </table>
  </div>

  <form id='myForm' action=''>
    <table id='here' border='1'>
      <thead>
        <tr>
          <th>Del</th>
          <th>After</th>
          <th>Before</th>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody id='target'>
      </tbody>
    </table>
  </form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gautam_reddycAuthor Commented:
hey thanks!! got it myself using row.rowIndex. Appreciate your effort!! you code worked too!!
0
HonorGodSoftware EngineerCommented:
Thanks for the grade & points.

Good luck & have a great day.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.