Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="ajax-dynamic-list.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Golden Collection </title>
<style type="text/css">
#mainContainer{
width:660px;
margin:0 auto;
text-align:left;
height:100%;
background-color:#FFF;
border-left:3px double #000;
border-right:3px double #000;
}
#formContent{
padding:5px;
}
/* END CSS ONLY NEEDED IN DEMO */
/* Big box with list of options */
#ajax_listOfOptions{
position:absolute;/* Never change this one */
width:175px;/* Width of box */
height:250px;/* Height of box */
overflow:auto;/* Scrolling features */
border:1px solid #317082;/* Dark green border */
background-color:#FFF;/* White background color */
text-align:left;
font-size:0.9em;
z-index:100;
}
#ajax_listOfOptions div{/* General rule for both .optionDiv and .optionDivSelected */
margin:1px;
padding:1px;
cursor:pointer;
font-size:0.9em;
}
#ajax_listOfOptions .optionDiv{/* Div for each item in list */
}
#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
background-color:#317082;
color:#FFF;
}
#ajax_listOfOptions_iframe{
background-color:#F00;
position:absolute;
z-index:5;
}
form{
display:inline;
}
</style>
<script type="text/javascript" language="javascript">
function addRow1(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td2 = document.createElement("TD")
var tt2 = document.createElement('input')
tt2.type = 'text'
tt2.value = ''
tt2.size = '45'
tt2.name = 'prod_name[]'
td2.appendChild (tt2)
var td3 = document.createElement("TD")
td3.setAttribute('align','left')
var tt3 = document.createElement('input')
tt3.type = 'button'
tt3.value = 'Remove'
tt3.name = 'bttn'
tt3.onclick=function(){removeRowFromTable1(this);};
td3.appendChild (tt3)
row.appendChild(td2);
row.appendChild(td3);
tbody.appendChild(row);
}
function removeRowFromTable1(obj){
var tbl = document.getElementById('exp1254911560');
var par=obj.parentNode;
par=par.parentNode;
var tt = par.rowIndex;
tbl.deleteRow(par.rowIndex);
}
</script>
</head>
<body>
<form name="form1" method="post">
<table width="98%" cellpadding="0" cellspacing="0" class="data-table">
<tr><td colspan="9">
<table id="exp1254911560">
<td width="31%">Product Name <span style="color:#FF0000"> * </span></td>
<td><input type="button" name="add" value="Add Input" onClick="addRow1('exp1254911560')"></td>
</tr>
<tr>
<td><h6>
<input name="prod_name[]" type="text" size="45" onKeyUp="ajax_showOptions(this,'getname',event)" />
</h6></td>
<td><input type="button" name="remove[]" value="Remove" onClick="removeRowFromTable1(this)" ></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
