The code below is an html page with some javascript that is designed to let a user add a row to a table. What I an trying to do here is to clone a row to get the basic format of the row, set an attribute in an input field in the row and insert it at the end of the group of rows in the table.
It works great up to a point. In the newRow function, when the “+” is clicked the immediate row is cloned, the “value” attribute for the <input> tag is set and then the row is appended using appendChild().
It works fine, setting the attribute to “input Name” except in one condition. If I have entered a new name in the input field of a row and then click on the “+” sign in that row, it adds a row but leaves the value attribute equal to the new value entered in the field. The row is contained in the “row” variable and when I inspect the value attribute of the row variable using “alert()” just before appending it, it shows the value to be “Input Name.” Yet, the new row has the value entered into the input field.
Can anyone help me figure out what is going on here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style text/css>
a {text-decoration: none}
</style>
<script type="text/javascript">
function pn(){
var idt = document.getElementsByTagName('tr');
idt = idt[0].id;
alert(idt);
}
function newRow(t){
var parent = t.parentNode.parentNode.parentNode;
var row = t.parentNode.parentNode.cloneNode(true);
row.firstChild.nextSibling.firstChild.setAttribute('value','Input Name');
alert('value = ' + row.firstChild.nextSibling.firstChild.getAttribute('value'));
parent.appendChild(row);
}
function removeRow(t){
var y = t.parentNode.parentNode;
y.parentNode.removeChild(y);
}
</script>
</head>
<body>
<table border="1" >
<tr id="74" ><td><a href="#" onclick="newRow(this);" >+</a> <a href="#" onclick="removeRow(this);" >-</a> </td><td class="small" ><input type="text" value="Charles" ></td></tr>
</table>
</body>
</html>
Some addition curiosity:
I am new to javascript, coming from php programming and am frustrated that I can’t simply insert whatever html I want right where I want it but have to go through this baroque “node” process. “appendChild” seems like an extreme limitation when I want to insert new code following a set of siblings. I have to refer back to the parent and turn the siblings into children and append a new child. Why not just something like “insertAfterLastSibling()” or “insertAfter()”? There is an “insertBefore()” function available.
And it is all programming in a black box as you can’t really see the changes you have made except by observing their effects indirectly or displaying the generic information in an alert(). I’m curious why the changes javascript makes aren’t reflected in the source code. It seems like an obvious way to make the process more accessible.
Thanks for any help and answers to my questions.
–Kenoli
