onclick add row with image and onclick remove row with image for client site
Hi there,
How do I insert rows with image when I click on the plus image, and onclick minus image remove row with image for client side to javascript is it possible.
code:
<html>
<head>
<title>Booking form </title>
<!-- Add room-->
<script language="JavaScript">
function addRoom(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var column = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("1"))
column.appendChild(td1);
tbody.appendChild(column);
}
//Add people
function addPeople(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var column = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("1"))
column.appendChild(td1);
tbody.appendChild(column);
}
</script>
<style type="text/css">
.normal{font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#000000;}
</style>
</head>
<body leftmargin="0" topmargin="20" marginwidth="0" marginheight="0">
<form method="post" action="" name="main">
<table width="60%" border="0" cellpadding="0" cellspacing="0" align="center" valign="top">
<tr>
<td class="normal" colspan=2></td>
</tr>
<tr bgcolor="#F8F0F7">
<td class="normal" align=center height="155" valign=top>
<table id="myTable" width="80%" border="0" cellspacing="0" cellpadding="0" align=center valign=top>
<tr>
<td align=center class="normal">Rooms</td>
</tr>
<tr>
<td valign="top" align=center><a href="javascript:addRoom('myTable')">[+]</a> [-]</td>
</tr>
<tr>
<td valign="top" align=center><img src="home.gif" border=0 alt=""></td>
</tr>
</table>
</td>
<td class="normal" align=center height="155" valign=top>
<table id="myTable1" width="80%" border="0" cellspacing="0" cellpadding="0" align=center valign=top>
<tr>
<td align=center class="normal">People</td>
</tr>
<tr>
<td valign="top" align=center><a href="javascript:addPeople('myTable1')">[+]</a> [-]</td>
</tr>
<tr>
<td valign="top" align=center><img src="people.gif" border=0 alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
thanks
dp
