delete row that was created with dom

[papas]

hello everyone.


i created this little script that creates dynamically a row.

my problem is that when i want to delete a row it always deletes the last one, they way i have it mind that it will only delete the selected row.

here is my code any help is appreciated


<script type="text/javascript">
var position_color = 1;
var position_size = 1;
function deleteRow(pos,color_index)
{
var tbl = document.getElementById(color_index);
var lastRow = tbl.rows.length;
// if (lastRow > 1)
tbl.deleteRow(pos);
}

function addRow(text)
{
//alert(text);
if(text == "color")
position_color++;
else if(text == "size")
position_size++;

var tbody = document.getElementById(text).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var cell1 = document.createElement("td");
if(text == "color")
cell1.innerHTML = "Add Another Color";
else if(text == "size")
cell1.innerHTML = "Add Another Size";

var cell2 = document.createElement("td");
if(text == "color")
cell2.innerHTML = <?php echo $select_; ?>;
else if(text == "size")
cell2.innerHTML = <?php echo $select_size; ?>;


var cell3 = document.createElement("td");
cell3.setAttribute("align","right");

var inp3 = document.createElement("input");
inp3.setAttribute("type","button");
inp3.setAttribute("value","Delete");
if(text == "color"){
alert(position_color)
inp3.setAttribute("id",position_color);
inp3.setAttribute("onclick", "deleteRow(" + position_color +",'"+ text + "');");
}
else if(text == "size"){
inp3.setAttribute("id", position_size);
inp3.setAttribute("onclick", "deleteRow(" + position_size +",'"+ text + "');");
}

cell3.appendChild(inp3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tbody.appendChild(row);
//alert(row.innerHTML);
}


<table width="500" align="center" id="color" border="1">
<tr>
<td width="188"><a href="#" onclick="addRow('color');">Add Color</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="500" align="center" id="size">
<tr>
<td width="188"><a href="#" onclick="addRow('size');">Add Size</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</script>

[glenngv]

Set an id to the row.
var row = document.createElement("tr");
row.setAttribute("id", "row"+position_color);
...
if(text == "color"){
inp3.setAttribute("id",position_color);
inp3.onclick = new Function("deleteRow(" + position_color +", '"+ text + "')");
}
function deleteRow(pos, color_index)
{
var tbl = document.getElementById(color_index).;
var row = document.getElementById("row"+pos);
tbl.getElementsByTagName("tbody")[0].removeChild(row);
}

[papas]

thank you very much sir

will try that as soon as i get home

cheers for the reply will let you know if it worked.


a big thank you sir worked like a charm

[tobyhs]

Hi glenngv, probably a very silly question but it's proving to be elusive as I'm new to DOM & TOM!

How do I get a value for 'pos' in your function deleteRow(pos, table_ID) being either the current row number or its ID activated by the user in a tbody?

I've got a manual drag-drop and automatically sortable table in which I need to be able to highlight, delete etc any selected record. Any help very much appreciated...

[Kor]

it would be easier probably to use the rowIndex attribute and the parentNode backward reference.

...
var inp3 = document.createElement("input");
inp3.setAttribute("type","button");
inp3.setAttribute("value","Alert row's index");
inp3.onclick=function(){alert(this.parentNode.parentNode.rowIndex)}
...

[tobyhs]

Thanks for your feedback Kor, but I can't get this to work.

When the user clicks any tBody row in a dynamic table regardless of cells or contents, I need the document.onclick event function to return the activated row index (after filtering to ensure I'm in the right table of course!). That will then allow further processing of the selected row. I just get 'undefined' back.

[Kor]

Post your code

[tobyhs]

Hi Kor, ta, but before I do that, I've since sussed out that the problem might be a variable I'm using to store the activated row index which, although declared globally, isn't visible within my new, experimenting document.onclick function? (revealing my strongly VB background & near vertical learning curve here!)

The activated row index is now successfully identifed and assigned to a variable (obviously, I now see, not the globally declared one!) within an encapsulated table class's method, but I've been trying to also use it within external functions to highlight and process the active row in various ways chosen by the user! (Intending to later turn into class methods too.)

Think I need to get my head round JavaScript's more fundamental scope thing better and do some tidying up first rather than waste your time on what might be irrelevant issues!

Know of any good articles on scope, visibility and passing values between classes/functions? I'm okay with arguments and returns, but obviously need to be more crystal clear on what's seeing what and when. :confused:

[Kor]

You don't need the document.onclick by all means. Usually, when deleting a row, you have a button or a link which should, onclick, call the function. You may add the event in a static way (write in HTML) or dynamic.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function deleteRow(obj){
var row=obj.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td>1</td>
<td>&nbsp;</td>
<td><a href="#" onclick="deleteRow(this);return false">delete this row</a></td>
</tr>
<tr>
<td>2</td>
<td>&nbsp;</td>
<td><a href="#" onclick="deleteRow(this);return false">delete this row</a></td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td><a href="#" onclick="deleteRow(this);return false">delete this row</a></td>
</tr>
</table>

</body>
</html>

[tobyhs]

Hi Kor, many thanks for the timely reminder that simplest solutions are often the best - once you know how to implement them! A delete icon that does that to the right of the row is about as intuitive as you could get and does what it says on the tin.

I'll have a go at trying to use the same methodology to insert a new populated row node below the target one. Seems all very clunky stuff to code up though...

[Kor]

Well, an easy way to insert new rows is to use the cloneNode() method. Here's e basic example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function deleteRow(obj){
var row=obj.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function addRow(obj){
var row=obj.parentNode.parentNode;
var clone=row.cloneNode(true);
row.parentNode.appendChild(clone)
}
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td>text</td>
<td><a href="#" onclick="deleteRow(this);return false">delete this row</a></td>
<td><a href="#" onclick="addRow(this);return false">add a new row</a></td>
</tr>
<tr>
</table>
</body>
</html>

[tobyhs]

Looks great! You're building up to a free half-pint of best cooking bitter in a handle! I'll give it a shot in the morning. Trying at the mo to get the mouse cursor to swap between the data columns and my new controls column, so the table's 'move' cursor (indicating the potential to drag&drop rows) reverts to the standard pointer over the delete icon...

[tobyhs]

Clearly, really understanding all the node and OO stuff for these web pages is the answer to simple, tight code. Being able to add a new, fully populated row like that is really neat. Thanks. Thought for user testing I might be able to get away initially with hacking together a rough pilot of the interface I'd conceived, but obviously smarter to 'read the book' first! So reading...