|
 |
| |
Code JavaScript CreateElement/appendChild/removeChild ใช้กับ Firefox ไม่ได้แก้ให้หน่อยน่ะ |
| |
 |
|
|
 |
 |
|
ผมไม่ค่อยแน่ใจ เพราะ ลืม แต่ Firefox มัน จะมี element text ด้วย ดังนั้นไม่ควรใช้ พวก sibling, ..child ต่างๆครับ เพราะ อาจทำให้ต้องโค้ดเยอะ(ให้ขึ้นกับแต่ละ บราวเซอร์)
พิจารณาใช้ jQuery แทนนะครับ
|
 |
 |
 |
 |
| Date :
2009-03-17 18:01:32 |
By :
pjgunner |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
๋Jquery ยังทำไม่เป็นเลย ปวดหมองๆ
|
| |
|
|
| |
| Date :
2009-03-24 11:10:02 |
By :
petch.it24 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ให้แก้ไขตรงส่วนของ createElement นิดหน่อยครับ
ใน FF ไม่สามารถกำหนด attribute ให้กำ element ผ่านคำสัง่ createElement ได้โดยตรง
ให้สร้าง input ธรรมดาแล้วค่อยกำหนด attribute ทีหลังครับ
Code
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txt[]");
myElement1.setAttribute('id',"txt1");
mySpan.appendChild(myElement1);
|
| |
|
|
| |
| Date :
2009-03-30 11:10:18 |
By :
p_latplee |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (JavaScript CreateElement )
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<script language="javascript">
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
/*var myElement1 = document.createElement('<input type="text" name="txt[]">');
myElement1.setAttribute('id',"txt1");
mySpan.appendChild(myElement1);*/
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"txt");
myElement1.setAttribute('name',"txt[]");
//myElement1.setAttribute('id',"txt[]");
mySpan.appendChild(myElement1);
//*** Remove Element ***//
/*
var deleteEle = document.getElementById('txt1');
mySpan.removeChild(deleteEle);
*/
var myElement2 = document.createElement('<br>');
mySpan.appendChild(myElement2);
}
</script>
<body>
<span id="mySpan"></span>
<input name="btnButton" id="btnButton" type="button" value="Create" onClick="JavaScript:fncCreateElement();">
</body>
</html>
ผมแก้ไขให้เรียบร้อยแล้วน่ะครับ สามารถใช้ได้ทั้ง IE และ Firefox
Ajax CreateElement
Code (JavaScript)
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
<script language="javascript">
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txtSiteName[]");
mySpan.appendChild(myElement1);
var myElement2 = document.createElement('<br>');
mySpan.appendChild(myElement2);
}
</script>
</head>
<body>
<form action="php_multiple_textbox4.php" method="post" name="form1">
<input type="text" name="txtSiteName[]">
<input name="btnButton" type="button" value="+" onClick="JavaScript:fncCreateElement();"><br>
<span id="mySpan"></span>
<input name="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
|
| |
|
|
| |
| Date :
2009-10-18 19:02:58 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อันนี้มีทั้ง appendChild และ removeChild ครับ
Code (PHP)
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<script language="javascript">
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
myLine.value++;
// Create input text
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txtGalleryName"+myLine.value);
myElement1.setAttribute('id',"txt"+myLine.value);
mySpan.appendChild(myElement1);
// Create input file
var myElement2 = document.createElement('input');
myElement2.setAttribute('type',"file");
myElement2.setAttribute('name',"fileUpload"+myLine.value);
myElement2.setAttribute('id',"fil"+myLine.value);
mySpan.appendChild(myElement2);
// Create <br>
var myElement3 = document.createElement('<br>');
myElement3.setAttribute('id',"br"+myLine.value);
mySpan.appendChild(myElement3);
}
function fncDeleteElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
if(myLine.value > 1 )
{
// Remove input text
var deleteFile = document.getElementById("txt"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove input file
var deleteFile = document.getElementById("fil"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove <br>
var deleteBr = document.getElementById("br"+myLine.value);
mySpan.removeChild(deleteBr);
myLine.value--;
}
}
</script>
<body>
<form action="php_multiple_upload5.php" method="post" name="form1" enctype="multipart/form-data">
<input type="text" name="txtGalleryName1"><input type="file" name="fileUpload1">
<input name="btnCreate" type="button" value="+" onClick="JavaScript:fncCreateElement();">
<input name="btnDelete" type="button" value="-" onClick="JavaScript:fncDeleteElement();"><br>
<span id="mySpan"></span>
<input name="hdnLine" type="hidden" value="1">
<input name="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
อันนี้แบบ Table ครับ
Code (JavaScript)
<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
function CreateNewRow()
{
var intLine = parseInt(document.frmMain.hdnMaxLine.value);
intLine++;
var theTable = document.all.tbExp
var newRow = theTable.insertRow(theTable.rows.length)
newRow.id = newRow.uniqueID
var item1 = 1
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+"\" 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+"\" 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+"\" 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+"\" VALUE=\"\"></center>"
//*** Column 5 ***//
newCell = newRow.insertCell(4)
newCell.id = newCell.uniqueID
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"
document.frmMain.hdnMaxLine.value = intLine;
}
function RemoveRow()
{
intLine = parseInt(document.frmMain.hdnMaxLine.value);
if(parseInt(intLine) > 0)
{
theTable = (document.all) ? document.all.tbExp :
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>
Screenshot
|
| |
|
|
| |
| Date :
2010-04-03 09:19:00 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (JavaScript)
<script language="javascript">
function fncCreateElement(){
var myLine = document.getElementById('hdnLine');
var mySpan = document.getElementById('mySpan');
myLine.value++;
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"file");
myElement1.setAttribute('name',"filUpload[]"+myLine.value);
myElement1.setAttribute('id',"filUpload[]"+myLine.value);
mySpan.appendChild(myElement1);
var myElement2 = document.createElement('input');
myElement2.setAttribute('type',"button");
myElement2.setAttribute('name',"btn2[]"+myLine.value);
myElement2.setAttribute('id',"btn2[]"+myLine.value);
myElement2.setAttribute('value',"-");
myElement2.setAttribute('onClick',"fncRemoveElement("+myLine.value+")");
mySpan.appendChild(myElement2);
var myElement3 = document.createElement('br');
myElement3.setAttribute('id',"br[]"+myLine.value);
mySpan.appendChild(myElement3);
}
function fncRemoveElement(col){
var mySpan = document.getElementById('mySpan');
//var myLine = document.getElementById('hdnLine');
//myLine.value--;
var myElement1 = document.getElementById('filUpload[]'+col);
mySpan.removeChild(myElement1);
var myElement2 = document.getElementById('btn2[]'+col);
mySpan.removeChild(myElement2);
var myElement3 = document.getElementById('br[]'+col);
mySpan.removeChild(myElement3);
}
</script>
|
| |
|
|
| |
| Date :
2012-07-06 09:48:37 |
By :
Shikaru |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
