001.<html>
002.<head>
003.<link rel="stylesheet" href="css/w3.css">
004.<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
005.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
006.</head>
007.<?
008.include('dbconnect.php');
009.$strSQL = "SELECT * FROM tb_product";
010.$objQuery = mysqli_query($conn,$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 = mysqli_fetch_array($objQuery))
021. {
022. ?>
023. var Item = new Option("<?php echo $objResult["product_code"];?>", "<?php echo $objResult["product_name"];?>", "<?php echo $objResult["unit_name"];?>");
024. objSelect.options[objSelect.length] = Item;
025.
026. <?
027. }
028. ?>
029. }
030.
031. function resutPD(strPD)
032. {
033. frmMain.product_name.value = strPD.split(",")[1];
034. frmMain.unit_name.value = strPD.split(",")[2];
035. }
036.
037. function CreateNewRow()
038. {
039. var intLine = parseInt(document.frmMain.hdnMaxLine.value);
040. intLine++;
041.
042. var theTable = document.getElementById("tbExp");
043. var newRow = theTable.insertRow(theTable.rows.length)
044. newRow.id = newRow.uniqueID
045.
046. var newCell
047.
048.
049.
050. newCell = newRow.insertCell(0);
051. newCell.id = newCell.uniqueID;
052. newCell.setAttribute("className", "css-name");
053. newCell.innerHTML = "<center><SELECT NAME=\"product_code_"+intLine+"\" ID=\"product_code"+intLine+"\" ONCHANGE=\"resutPD(this.value)"+intLine+"\" CLASS=\"w3-input"+intLine+"\"></SELECT></center>";
054.
055.
056. newCell = newRow.insertCell(1);
057. newCell.id = newCell.uniqueID;
058. newCell.setAttribute("className", "css-name");
059. newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"product_name"+intLine+"\" ID=\"product_name_"+intLine+"\" VALUE=\"\"></center>";
060.
061.
062. newCell = newRow.insertCell(2);
063. newCell.id = newCell.uniqueID;
064. newCell.setAttribute("className", "css-name");
065. newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"unit_name"+intLine+"\" ID=\"unit_name_"+intLine+"\" VALUE=\"\"></center>";
066.
067.
068. newCell = newRow.insertCell(3);
069. newCell.id = newCell.uniqueID;
070. newCell.setAttribute("className", "css-name");
071. newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4"+intLine+"\" ID=\"Column4_"+intLine+"\" VALUE=\"\"></center>";
072.
073.
074. newCell = newRow.insertCell(4);
075. newCell.id = newCell.uniqueID;
076. newCell.setAttribute("className", "css-name");
077. newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column5"+intLine+"\" ID=\"Column5_"+intLine+"\" VALUE=\"\"></center>";
078.
079.
080.
081. CreateSelectOption("product_code"+intLine)
082.
083. document.frmMain.hdnMaxLine.value = intLine;
084. }
085.
086. function RemoveRow()
087. {
088. intLine = parseInt(document.frmMain.hdnMaxLine.value);
089. if(parseInt(intLine) > 0)
090. {
091. theTable = document.getElementById("tbExp");
092. theTableBody = theTable.tBodies[0];
093. theTableBody.deleteRow(intLine);
094. intLine--;
095. document.frmMain.hdnMaxLine.value = intLine;
096. }
097. }
098.</script>
099.<body>
100.<?php $i=0; ?>
101.<form name="frmMain" method="post">
102.<table width="50%" border="1" id="tbExp">
103. <tr>
104. <td><div align="center">Column 1 </div></td>
105. <td><div align="center">Column 2 </div></td>
106. <td><div align="center">Column 3 </div></td>
107. <td><div align="center">Column 4 </div></td>
108. <td><div align="center">Column 5 </div></td>
109. </tr>
110.</table>
111.<input type="hidden" name="hdnMaxLine" value="0">
112.<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
113.<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
114.</form>
115.</body>
116.</html>
