onclick add row with image and onclick remove row with image for client site

dattapuro · Mar 14th, 2002, 04: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>

<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

**punkpie_uk** · Mar 14th, 2002, 09: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>

Thread: onclick add row with image and onclick remove row with image for client site

Thread Tools

Display

onclick add row with image and onclick remove row with image for client site

Posting Permissions