...

View Full Version : change table row



nikko50
06-20-2012, 02:59 PM
Hi!

How can I replace a table row with another row with new elements. Below I have a table with one row. How can I create a onclick function to replace the table row with a new row and elements.




<table name="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>




<a onClick="changeRow();" href="#"> Click to Change Row</a>

DaveyErwin
06-20-2012, 03:57 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%">row2</td>
<td width="50%">row2</td>
</tr>
</table>
<table id="altTable" style="display:none;">
<tr id="row3">
<td width="50%">row3</td>
<td width="50%">row3</td>
</tr></table>


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

</body></html>

nikko50
06-20-2012, 05:15 PM
I was looking to replace "row1" of "myTable" with a new row with new elements. How can I do this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum