001.
<html>
002.
<head>
003.
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
004.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
005.
</head>
006.
<?
007.
mysql_connect(
"localhost"
,
"root"
,
"root"
);
008.
mysql_select_db(
"mydatabase"
);
009.
$strSQL =
"SELECT * FROM customer"
;
010.
$objQuery = mysql_query($strSQL);
011.
?>
012.
<script language=
"javascript"
>
013.
014.
function
CreateSelectOption(ele)
015.
{
016.
var
objSelect = document.getElementById(ele);
017.
var
Item =
new
Option(
""
,
""
);
018.
objSelect.options[objSelect.length] = Item;
019.
<?
020.
while
($objResult = mysql_fetch_array($objQuery))
021.
{
022.
?>
023.
var
Item =
new
Option(
"<?=$objResult["
Name
"];?>"
,
"<?=$objResult["
CustomerID
"];?>"
);
024.
objSelect.options[objSelect.length] = Item;
025.
<?
026.
}
027.
?>
028.
}
029.
030.
function
CreateNewRow()
031.
{
032.
var
intLine = parseInt(document.frmMain.hdnMaxLine.value);
033.
intLine++;
034.
035.
var
theTable = document.getElementById(
"tbExp"
);
036.
var
newRow = theTable.insertRow(theTable.rows.length)
037.
newRow.id = newRow.uniqueID
038.
039.
var
newCell
040.
041.
042.
newCell = newRow.insertCell(0);
043.
newCell.id = newCell.uniqueID;
044.
newCell.setAttribute(
"className"
,
"css-name"
);
045.
newCell.innerHTML =
"<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"
+intLine+
"\" ID=\"Column1_"
+intLine+
"\" VALUE=\"\"></center>"
;
046.
047.
048.
newCell = newRow.insertCell(1);
049.
newCell.id = newCell.uniqueID;
050.
newCell.setAttribute(
"className"
,
"css-name"
);
051.
newCell.innerHTML =
"<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"
+intLine+
"\" ID=\"Column2_"
+intLine+
"\" VALUE=\"\"></center>"
;
052.
053.
054.
newCell = newRow.insertCell(2);
055.
newCell.id = newCell.uniqueID;
056.
newCell.setAttribute(
"className"
,
"css-name"
);
057.
newCell.innerHTML =
"<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"
+intLine+
"\" ID=\"Column3_"
+intLine+
"\" VALUE=\"\"></center>"
;
058.
059.
060.
newCell = newRow.insertCell(3);
061.
newCell.id = newCell.uniqueID;
062.
newCell.setAttribute(
"className"
,
"css-name"
);
063.
newCell.innerHTML =
"<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"
+intLine+
"\" ID=\"Column4_"
+intLine+
"\" VALUE=\"\"></center>"
;
064.
065.
066.
newCell = newRow.insertCell(4);
067.
newCell.id = newCell.uniqueID;
068.
newCell.setAttribute(
"className"
,
"css-name"
);
069.
newCell.innerHTML =
"<center><SELECT NAME=\"Column5_"
+intLine+
"\" ID=\"Column5_"
+intLine+
"\"></SELECT></center>"
;
070.
071.
072.
CreateSelectOption(
"Column5_"
+intLine)
073.
074.
document.frmMain.hdnMaxLine.value = intLine;
075.
}
076.
077.
function
RemoveRow()
078.
{
079.
intLine = parseInt(document.frmMain.hdnMaxLine.value);
080.
if
(parseInt(intLine) > 0)
081.
{
082.
theTable = document.getElementById(
"tbExp"
);
083.
theTableBody = theTable.tBodies[0];
084.
theTableBody.deleteRow(intLine);
085.
intLine--;
086.
document.frmMain.hdnMaxLine.value = intLine;
087.
}
088.
}
089.
</script>
090.
<body>
091.
<form name=
"frmMain"
method=
"post"
>
092.
<table width=
"445"
border=
"1"
id=
"tbExp"
>
093.
<tr>
094.
<td><div align=
"center"
>Column 1 </div></td>
095.
<td><div align=
"center"
>Column 2 </div></td>
096.
<td><div align=
"center"
>Column 3 </div></td>
097.
<td><div align=
"center"
>Column 4 </div></td>
098.
<td><div align=
"center"
>Column 5 </div></td>
099.
</tr>
100.
</table>
101.
<input type=
"hidden"
name=
"hdnMaxLine"
value=
"0"
>
102.
<input name=
"btnAdd"
type=
"button"
id=
"btnAdd"
value=
"+"
onClick=
"CreateNewRow();"
>
103.
<input name=
"btnDel"
type=
"button"
id=
"btnDel"
value=
"-"
onClick=
"RemoveRow();"
>
104.
</form>
105.
</body>
106.
</html>