<html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="JavaScript"> function addRow(strCustomerID,strName,strEmail,strCountryCode,strBudget,strUsed) { if (!document.getElementsByTagName) return; tBody=document.getElementsByTagName("tbody").item(0); //*** New Row ***// NewRow=document.createElement("tr"); //*** Cell CustomerID ***// cellCustomerID = document.createElement("td"); nodeCustomerID=document.createTextNode(strCustomerID); cellCustomerID.appendChild(nodeCustomerID); NewRow.appendChild(cellCustomerID); //*** Cell Name ***// cellName = document.createElement("td"); nodeName=document.createTextNode(strName); cellName.appendChild(nodeName); NewRow.appendChild(cellName); //*** Cell Budget ***// cellEmail = document.createElement("td"); nodeEmail=document.createTextNode(strEmail); cellEmail.appendChild(nodeEmail); NewRow.appendChild(cellEmail); //*** Cell Country Code ***// cellCountryCode = document.createElement("td"); nodeCountryCode=document.createTextNode(strCountryCode); cellCountryCode.appendChild(nodeCountryCode); NewRow.appendChild(cellCountryCode); //*** Cell Budget ***// cellBudget = document.createElement("td"); nodeBudget=document.createTextNode(strBudget); cellBudget.appendChild(nodeBudget); NewRow.appendChild(cellBudget); //*** Cell Used ***// cellUsed = document.createElement("td"); nodeUsed=document.createTextNode(strUsed); cellUsed.appendChild(nodeUsed); NewRow.appendChild(cellUsed); tBody.appendChild(NewRow); } </script> </head> <body> <table width="600" border="1" id="mytable"> <tr> <th width="91"> <div align="center">CustomerID </div></th> <th width="98"> <div align="center">Name </div></th> <th width="198"> <div align="center">Email </div></th> <th width="97"> <div align="center">CountryCode </div></th> <th width="59"> <div align="center">Budget </div></th> <th width="71"> <div align="center">Used </div></th> </tr> </table> <button onClick="addRow('C001','Win Weerachai','[email protected]','TH','1000000','600000');return false;">Add Row</button> </body> </html>
<html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="JavaScript"> function CreateSelectOption(ele) { var objSelect = document.getElementById(ele); var Item = new Option("", ""); objSelect.options[objSelect.length] = Item; var Item = new Option("Win Weerachai", "C001"); objSelect.options[objSelect.length] = Item; var Item = new Option("John Smith", "C002"); objSelect.options[objSelect.length] = Item; var Item = new Option("Jame Born", "C003"); objSelect.options[objSelect.length] = Item; var Item = new Option("Chalee Angel", "C004"); objSelect.options[objSelect.length] = Item; } function CreateNewRow() { var intLine = parseInt(document.frmMain.hdnMaxLine.value); intLine++; var theTable = document.getElementById("tbExp"); var newRow = theTable.insertRow(theTable.rows.length) newRow.id = newRow.uniqueID var newCell //*** Column 1 ***// newCell = newRow.insertCell(0); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"+intLine+"\" ID=\"Column1_"+intLine+"\" VALUE=\"\"></center>"; //*** Column 2 ***// newCell = newRow.insertCell(1); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"+intLine+"\" ID=\"Column2_"+intLine+"\" VALUE=\"\"></center>"; //*** Column 3 ***// newCell = newRow.insertCell(2); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"+intLine+"\" ID=\"Column3_"+intLine+"\" VALUE=\"\"></center>"; //*** Column 4 ***// newCell = newRow.insertCell(3); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\" ID=\"Column4_"+intLine+"\" VALUE=\"\"></center>"; //*** Column 5 ***// newCell = newRow.insertCell(4); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>"; //*** Create Option ***// CreateSelectOption("Column5_"+intLine) document.frmMain.hdnMaxLine.value = intLine; } function RemoveRow() { intLine = parseInt(document.frmMain.hdnMaxLine.value); if(parseInt(intLine) > 0) { theTable = document.getElementById("tbExp"); theTableBody = theTable.tBodies[0]; theTableBody.deleteRow(intLine); intLine--; document.frmMain.hdnMaxLine.value = intLine; } } </script> <body> <form name="frmMain" method="post"> <table width="445" border="1" id="tbExp"> <tr> <td><div align="center">Column 1 </div></td> <td><div align="center">Column 2 </div></td> <td><div align="center">Column 3 </div></td> <td><div align="center">Column 4 </div></td> <td><div align="center">Column 5 </div></td> </tr> </table> <input type="hidden" name="hdnMaxLine" value="0"> <input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();"> <input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();"> </form> </body> </html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท