Solved

Deleting or Removing Dynamic Row(s) in Table

Posted on 2003-10-28
11
307 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:sursatraj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9632624
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.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9632638
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.
0
 

Author Comment

by:sursatraj
ID: 9632690
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
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:sursatraj
ID: 9632973
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
0
 

Author Comment

by:sursatraj
ID: 9633041
Hi

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

Rgds
Surjit
0
 

Author Comment

by:sursatraj
ID: 9633134
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
0
 
LVL 11

Accepted Solution

by:
Zontar earned 300 total points
ID: 9633757
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?
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9633909
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.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9635150
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
0
 

Author Comment

by:sursatraj
ID: 9639824
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 ;-))
0
 

Expert Comment

by:acameron
ID: 9827095
The code snippets provided only shift the cells they do not acctually delete the row.  I dont want to hide, I want to delete...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question