469,900 Members | 1,437 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,900 developers. It's quick & easy.

Remove a table row

I need some help modifying this code. The code was orginally setup to
add/remove a single table row. I modified it to add 2 (two) rows with
one column that spans both rows. That part works. I just need help
with the removerow function. Thanks for any help you can offer me.
Here is the code:

<html>
<head>
<title>New Document</title>
<script type="text/javascript">
// The counter just keeps track of which row we've added so we can
// distinguish them. It is only used for generating text, none of
// the functions depend on this number for node manipulation.
var counter = 1;
var plain = true;

function addrow()
{
// Obtain a reference to the tbody node.
var tbody = document.getElementById("main").getElementsByTagNa me("tbody").item(0);

if(plain)
{
plain=false;
}
else
{
plain=true;
}
for(x=1;x<3;x++)
{

// Generate a new row.
var tr = document.createElement("tr");
if(plain)tr.bgColor = "#CCCCCC";
// Append the two cells to the element.
if(x==1)
{
td = document.createElement("td");
td.rowSpan = "2";
td.innerHTML = '<input type="button" value="Delete"
onclick="deleterow(this)" />';
tr.appendChild(td);
}
for(i=1;i<4;i++)
{
var td = document.createElement("td");
td.innerHTML = '<div align="right"><a onClick="removerow(this)"><img
src="images/delete2.jpg" width="16" height="16"></A></div>';
tr.appendChild(td);
}

// Now append the new row to the tbody.
tbody.appendChild(tr);
}
}

function deleterow(node)
{
// Obtain a reference to the containing tr. Use a while loop
// so the function can be called by passing any node contained by
// the tr node.
var tr = node.parentNode;
while (tr.tagName.toLowerCase() != "tr")
tr = tr.parentNode;

// Remove the tr node and all children.
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<table id="main" border="2">
<tr>
<td>Dynamic Table Demo</td>
<td><input type="button" onclick="addrow()" value="Add Row"/></td>
</tr>
</table>
</body>
</html>
Jul 20 '05 #1
1 6996
Steve S wrote:
I modified it to add 2 (two) rows with
one column that spans both rows. That part works. I just need help
with the removerow function. if(plain)
{
plain=false;
}
else
{
plain=true;
}
What about
plain=!plain;
td.innerHTML = '<div align="right"><a onClick="removerow(this)"><img


removerow is undefined, while deleterow happily exists:-)

If you insert two rows then you must remove two as well, the problem is
to determine which rows to remove. There are many ways to find this, you
could (1) simply tell which rows to remove when calling the function or
(2) guess which one to remove, for instance checking the rowspan
property and making appropriate decision on whether to remove the next
sibling or the previous sibling as well.

However, I don't really understand the logic of your buttons/links
(deleterow/removerow may really be different functions); hopefully the
techniques below will nevertheless help you into building an approriate
script.
<script type="text/javascript">
var addRowTo = (function() {

var getBgColor=(function(){
var k=0, bg1="#ccc", bg2="transparent";
return (function() {
return k==0 ?
(k=1, bg1) :
(k=0, bg2);
});
})();

return (function (tableId){
var d, tbody, tr, td, bgc, ii, j;

d=document;
bgc=getBgColor();
tbody=d.getElementById(tableId).
getElementsByTagName("tbody").
item(0);

for(ii=0; ii<2; ii++) {
tr=d.createElement("tr");
tr.style.backgroundColor=bgc;

if(ii==0) {
td=d.createElement("td");
td.rowSpan="2";
td.innerHTML="<input type='button'"+
" value='Delete'"+
" onclick='removeRow(this)'>";
tr.appendChild(td);
}

for(j=0; j<3; j++) {
td=d.createElement("td");
td.innerHTML="<a onClick='removeRow(this)'>x<\/a>";
tr.appendChild(td);
}

tbody.appendChild(tr);
}
});
})();

function removeRow(el){
var cel;

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

if(el && el.parentNode){
cel=el.getElementsByTagName("td").item(0);
el.parentNode.removeChild(
el[(cel.rowSpan=="2"?"next":"previous")+"Sibling"]);
el.parentNode.removeChild(el);
}
}
</script>

<table id="main" border="2">
<tbody>
<tr>
<td>Dynamic Table Demo</td>
<td colspan="3">
<input type="button"
onclick="addRowTo('main')"
value="Add Row">
</td>
</tr>
</tbody>
</table>
HTH
Yep.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Soul | last post: by
3 posts views Thread by axlq | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.