...
PDA

add row clone

nikko50
03-18-2012, 08:32 PM
Hi all!

I have a function that adds a row when clicked. It just clones the last row but it also copys the text in the fields if the user types any. Drop list work fine but I don't want to copt the text also. What can I do??

Tracy




<script>
function addRowClone(tblId)
{
var tblBody = document.getElementById(tblId).tBodies[0];
var newNode = tblBody.rows[1].cloneNode(true);
tblBody.appendChild(newNode);

}

</script>

<a onclick="addRowClone('testTable')" href="#" return false; >Click here to add rows</a>
<table id="testTable" >
<tr>
<td >
<input type="text" name="T1" size="20">
</td>
<td >
<input type="text" name="T1" size="20">

</td>
<td>
<select name="drop" size="1">

<option value="">-Select Value-</option>
<option value="honda">honda</option>
<option value="toyota">toyota</option>
</select>
</td>
</tr>
<tr>
<td >
<input type="text" name="T1" size="20">
</td>


<td >
<input type="text" name="T1" size="20">

</td>
<td>
<select name="drop" size="1">

<option value="">-Select Value-</option>
<option value="honda">honda</option>
<option value="toyota">toyota</option>
</select>
</td>
</tr>


</table>
DaveyErwin
03-18-2012, 09:06 PM
<script>
var newNode;
var tblBody;
function addRowClone(tblId)
{
tblBody.appendChild(newNode.cloneNode(true));
}
function init(tblId){
tblBody = document.getElementById(tblId).tBodies[0];
newNode = tblBody.rows[1].cloneNode(true);
};
</script>
<body onload="init('testTable')">
<a onclick="addRowClone('testTable')" href="#" return false; >Click here to add rows</a>
<table id="testTable" >
<tr>
<td >
<input type="text" name="T1" size="20">
</td>
<td >
<input type="text" name="T1" size="20">

</td>
<td>
<select name="drop" size="1">

<option value="">-Select Value-</option>
<option value="honda">honda</option>
<option value="toyota">toyota</option>
</select>
</td>
</tr>
<tr>
<td >
<input type="text" name="T1" size="20">
</td>


<td >
<input type="text" name="T1" size="20">

</td>
<td>
<select name="drop" size="1">

<option value="">-Select Value-</option>
<option value="honda">honda</option>
<option value="toyota">toyota</option>
</select>
</td>
</tr>


</table>
</body>
nikko50
06-20-2012, 04:08 PM
Resolved. Thanks Davey!!
DaveyErwin
06-20-2012, 04:17 PM
<!doctype html>
<html>
<head>
<title>Swap Rows</title>

</head>
<body>
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr id="row1">
<td width="50%">

<input type="text" name="name" size="20">

<td width="50%">

<select size="1" name="cars">
<option value="ford">ford</option>
<option value="chevy">chevy</option>

</select>
</tr>
<tr id="row2">
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<table id="altTable" style="display:none;">
<tr id="row3">
<td width="50%"><input name="greetings" value="hiya"></td>
<td width="50%"><select>
<option value="Chys">Chysler</option>
<option value="Honda">Honda</option>
</select></td>
</tr></table>


<a onClick="swapRow();" href="#"> Click to Change Row</a>
<script>
var row1 = document.getElementById("row1");
var row3 = document.getElementById("row3");
var altTable = document.getElementById("altTable");
var myTable = document.getElementById("myTable");
function swapRow(){
altTable.appendChild(row1);
myTable.appendChild(row3);
}
</script>

</body></html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum