PDA

Click to See Complete Forum and Search --> : onclick add row with image and onclick remove row with image for client site

dattapuro
Mar 14th, 2002, 03:49 AM
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>&nbsp;&nbsp;&nbsp;[-]</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>&nbsp;&nbsp;&nbsp;[-]</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
punkpie_uk
Mar 14th, 2002, 08:39 AM
Try this, I wrote it a while ago. Just substitute the add and delete buttons for images of + and -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title> Add Row To Page </title>
<SCRIPT LANGUAGE="JavaScript">

function addRow(objectid, txt_column1, txt_column2){
var tbody = document.getElementById(objectid).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode(txt_column1))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode(txt_column2))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}

function deleteRow(objectid){
var table = document.getElementById(objectid).getElementsByTagName("TBODY")[0];
table.deleteRow(0);
}

</script>

</head>
<body>
<center>
<font face="arial" size="1">
<form name="form1">
<input type="text"
name="string1"
>
<input type="text"
name="string2"
>
<input type="button"
name="submitbutton"
value="Add"
onclick="addRow('table1', document.form1.string1.value, document.form1.string2.value)"
>
<input type="button"
name="deletebutton"
value="Delete"
onclick="javascript:deleteRow('table1');"
>
</form>
</center>

<table id="table1" cellspacing="0" border="1" width="100%">
<tbody>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
</tbody>
</table>


<br>
</font>
</html>