sursatraj
asked on
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('m ytable');
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
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('m
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
<td width="42%"><strong>Action
</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
Oops! (Wish they had a Preview feature here...)
The line
var index = document.getElementById("m yRow").row SectionInd ex;
should read
var index = document.getElementById("m yRow").sec tionRowInd ex;
Sorry about that.
The line
var index = document.getElementById("m
should read
var index = document.getElementById("m
Sorry about that.
ASKER
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
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
ASKER
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
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
ASKER
Hi
How can I add row id using insertRow() method...Is there any method to add row id...pls its very urgent..
Rgds
Surjit
How can I add row id using insertRow() method...Is there any method to add row id...pls its very urgent..
Rgds
Surjit
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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("m yTable");
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.
<table id="myTable">
...
</table>
and
var myTable = document.getElementById("m
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.
Hi,
Is this what you want?
<html>
<head>
<script>
var counter=0;
function addRow(addIt)
{
if (addIt)
{
var table = document.getElementById('m ytable');
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('t xtIssue'+c ounter).pa rentNode.i nnerHTML = "";
document.getElementById('t xtAction'+ counter).p arentNode. 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
Is this what you want?
<html>
<head>
<script>
var counter=0;
function addRow(addIt)
{
if (addIt)
{
var table = document.getElementById('m
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('t
document.getElementById('t
}
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mytable">
<tr>
<td width="19%"><strong>Issues
<td width="42%"><strong>Action
</tr>
</table>
<input type='button' onclick="addRow(1)" Value= 'Add Row'>
<input type='button' onclick="addRow(0)" Value= 'Delete Row'>
</body>
</html>
Vinny
ASKER
Hi Guys,
Below Comments from Zontar helped a lot.I achieved what I wanted.
-------------------------- ---------
function showRowIndex(button)
{
var el = button;
while(el.tagName.toLowerCa se() != "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 ;-))
Below Comments from Zontar helped a lot.I achieved what I wanted.
--------------------------
function showRowIndex(button)
{
var el = button;
while(el.tagName.toLowerCa
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 ;-))
The code snippets provided only shift the cells they do not acctually delete the row. I dont want to hide, I want to delete...
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 id="myRow"><td>Row</td><td
</tbody>
</table>
the line
document.getElementById("m
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("m
document.getElementById("m
will also delete the second row.
You could also use removeChild(), e.g. (again starting with the same table)
var myTable = document.getElementById("m
var myTBody = myTable.getElementsByTagNa
var myRow = document.getElementById("m
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.