Deleting or Removing Dynamic Row(s) in Table

Hi,

I am adding dynamic row(s) to a table using the below code
---------------------------------------------------------------------

<html>
<head>
<script>
var counter=0;
function addRow(){
    var table = document.getElementById('mytable');
          
    TR = table.insertRow();      
      
    TD = TR.insertCell();
    TD.innerHTML = "<textarea name='txtIssue" + uniqueId +"' rows='7'></textarea>";
      
    TD = TR.insertCell();
    TD.innerHTML = "<textarea name='txtAction" + uniqueId +"' cols='60' rows='10'></textarea>";
      
</script>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mytable">
  <tr>
  <td width="19%"><strong>Issues</strong></td>
  <td width="42%"><strong>Action</strong></td>                                
  </tr>              
</table>
<input type='button' onclick="addRow()" Value= 'Add Row'>
</body>
</html>
------------------------------------------------------------------------------


Now I need to remove/delete row dynamically as similar to adding dynamic row. How can I do that??

Pls help me out in finding the solution

Thanks & Rgds,
Surjit
sursatrajAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

ZontarCommented:
Use the removeChild() or deleteRow() method.

deleteRow() is a method of the HTMLTableElement object. It takes the index of the row weithin the table, e.g. for the table

<table id="myTable">
  <tbody>
    <tr><td>Row</td><td>#1</td></tr>
    <tr id="myRow"><td>Row</td><td>#2</td></tr>
  </tbody>
</table>

the line

document.getElementById("myTable").deleteRow(1);

will delete the second row. Indexing begins with zero.

You can use the sectionRowIndex property to get the index of the row, e.g. (using the same table to start with)

var index = document.getElementById("myRow").rowSectionIndex;
document.getElementById("myTable").deleteRow(index);

will also delete the second row.

You could also use removeChild(), e.g. (again starting with the same table)

var myTable = document.getElementById("myTable");
var myTBody = myTable.getElementsByTagName("tbody")[0];
var myRow = document.getElementById("myRow");

myTBody.removeChild(myRow);

Note that with removeChild(), the childNode to removed must be an *immediate* descendant of the node for which you call the method.
ZontarCommented:
Oops! (Wish they had a Preview feature here...)

The line

var index = document.getElementById("myRow").rowSectionIndex;

should read

var index = document.getElementById("myRow").sectionRowIndex;

Sorry about that.
sursatrajAuthor Commented:
Hi

When I am adding row dynamically...how should I assign it name or id dynamically..I am adding row using

TR = table.insertRow();    
     
    TD = TR.insertCell();
    TD.innerHTML = "<textarea name='txtIssue" + uniqueId +"' rows='7'></textarea>";
........................................

where should I put id or name for the row..I mean how to do it..

Rgds
Surjit
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

sursatrajAuthor Commented:
Hi

How should I name id's for rows which r created dynamically using TR = table.insertRow();
Is there any way to add row id using TR = table.insertRow();

If I have added 5 rows dynamically and I want to delete 3rd row...so how can I do that

Rgds
Surjit
sursatrajAuthor Commented:
Hi

How can I add row id using insertRow() method...Is there any method to add row id...pls its very urgent..

Rgds
Surjit
sursatrajAuthor Commented:
Hi

How to get the current row index of a table.
Suppose I have 5 rows..then in each row i have a "Button" On clicking this button i should be able to get or display(alert)  that button row's index....

Pls guide me.

Rgds
Surjit
ZontarCommented:
HTML:

<table>
  <tbody>
    <tr>
      <td><input type="button" onclick="alert( showRowIndex(this) );" value="Click Me"></td>
    </tr>
    <tr>
      <td><input type="button" onclick="alert( showRowIndex(this) );" value="Click Me"></td>
    </tr>
    <tr>
      <td><input type="button" onclick="alert( showRowIndex(this) );" value="Click Me"></td>
    </tr>
    <tr>
      <td><input type="button" onclick="alert( showRowIndex(this) );" value="Click Me"></td>
    </tr>
    <tr>
      <td><input type="button" onclick="alert( showRowIndex(this) );" value="Click Me"></td>
    </tr>
  </tbody>
</table>

JavaScript:

function showRowIndex(button)
{
  var el = button;

  while(el.tagName.toLowerCase() != "tr")
    el = el.parentNode;

  return el.sectionRowIndex;
}

The *this* keyword in each onclick handler refers to the button itself. The parentNode property get an element's parent. You keep getting the parents in succession until you hit one that's a TR element and return its sectionRowIndex.

Does that make any sense?

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
ZontarCommented:
To add an attribute to an element, you can either call its setAttribute() method or use dot syntax to set the equivalent property. If you have

<table id="myTable">
...
</table>

and

var myTable = document.getElementById("myTable");
var myTR = myTable.insertRow();

then either

myTR.setAttribute("id", "newTR");

or

myTR.id = "newTR";

will set its id attribute to "newTR". In the setAttribute() method, both arguments must be strings.
VincentPugliaCommented:
Hi,

Is this what you want?

<html>
<head>
<script>
var counter=0;

function addRow(addIt)
{
 if (addIt)
 {
 var table = document.getElementById('mytable');
 TR = table.insertRow();    
 TD = TR.insertCell();
 id = 'txtIssue' + counter;
 TD.innerHTML = "<textarea name='" + id + "' id='" + id +"' rows='7'></textarea>";
 TD = TR.insertCell();
id='txtAction' + counter
 TD.innerHTML = "<textarea name='" + id + "' id='" + id +"'  cols='60' rows='10'></textarea>";
 counter++;
 }
 else
 {
   counter--;
   document.getElementById('txtIssue'+counter).parentNode.innerHTML = "";
   document.getElementById('txtAction'+counter).parentNode.innerHTML = "";
 
 }
}
</script>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mytable">
  <tr>
  <td width="19%"><strong>Issues</strong></td>
  <td width="42%"><strong>Action</strong></td>                                
  </tr>              
</table>
<input type='button' onclick="addRow(1)" Value= 'Add Row'>
<input type='button' onclick="addRow(0)" Value= 'Delete Row'>
</body>
</html>

Vinny
sursatrajAuthor Commented:
Hi Guys,

Below Comments from Zontar helped a lot.I achieved what I wanted.
-----------------------------------
function showRowIndex(button)
{
  var el = button;

  while(el.tagName.toLowerCase() != "tr")
    el = el.parentNode;

  return el.sectionRowIndex;
}
myTR.setAttribute("id", "newTR");

or

myTR.id = "newTR";
-----------------------------------------------------------

I am working on my project. As soon as I finish I will distribute points.

Thanks for everyone helping me out so soon

Cheers,
Surjit ;-))
acameronCommented:
The code snippets provided only shift the cells they do not acctually delete the row.  I dont want to hide, I want to delete...
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
JavaScript

From novice to tech pro — start learning today.