ช่วยดูให้หน่อยครับว่าทำไม ตารางถึงไม่ขึ้นอ่ะครับบ นั้งแก้มาทั้งวันแล้วอ่ะครับพี่
body มันควรจะมี 1 ที่นะ ไม่ใช่ แทรกไป 2 ที่แบบนั้น อย่างอื่นแนะนำไม่ถูก ถ้าเปน jquery ยังพอช่วยได้
Date :
2016-02-03 01:25:09
By :
progamer2000
ที่มี body 2 อันเพราะผม อยากให้มี text box เริ่ม ต้นทั้ง 2 ตารางอ่ะครับ ขอบคุณพี่มากๆน่ะครับที่มาตอบผม งั้นผมก้รอพี่ๆผู้ตอบต่อไป
Date :
2016-02-03 05:23:57
By :
erlnw001
ศึกษาเรื่อง <body> ใหม่นะครับ
ที่ต้องการน่าจะเป็น<tbody> (ทีบอดี้) หรือเปล่า
และอย่าลืมปิด tagด้วย เปิดแล้วต้องปิด
ส่วน event onload ก็นำไปใสในฟังก์ชั่นเดียวกัน อ้าง tag จัดลำดับการเรียก ให้ถูกต้อง
var theTable = document.all.tbExp
บันทัดบนน่าจะเป็นการอ้างอิงจาก attribute NAME มากกว่า ID (ไม่แน่ใจไม่ได้ใช้นานแล้ว ลองค้นดูนะครับ)
แต่แก้เป็น var theTable = document.getElementById('tbExp'); แบบนี้ชัวร์แน่นอน
ส่วนคำสั่งที่มี่ pattern เหมือนกัน จับเข้าไปเป็น funcion ส่งเป็นพารามิเตอร์เข้าไปแทน
Code (JavaScript)
function insCell( row, no, css, html){
var cell = row.insertCell(no);
cell.id = cell.uniqueID;
cell.setAttribute("className", css);
cell.innerHTML = html;
}
insCell( newRow, 0, "css-name", '<center><INPUT TYPE="TEXT" NAME="Column1_'+intLine+'" VALUE=""></center>');
Date :
2016-02-03 07:09:46
By :
Chaidhanan
<body OnLoad="CreateNewRow();"> อันนี้ ผมถามแล้วพี่วินตอบมาอ่ะครับผมก้เลยใช้ ส่วน var theTable = document.all.tbExp อันนี้ผมลองแก้ของตารางที่ 2แล้วมันต้องกด - ก่อน1ทีแล้วกด + มันถึงจะเพิ่ม textbox ให้ผมอ่ะครับ รบกวนพี่ๆ อีกนิดน่ะครับ
Date :
2016-02-03 08:41:49
By :
erlnw001
ขีเกียจหาครับลองเอาไปดูเป็นตัวอย่างแล้วประยุกต์เอาเองนะครับ
เซฟเป็นไฟล์ทดสอบก่อน อ่านโค๊ด ทดลองเล่น แล้วค่อยแก้ไข
Code (PHP)
<?php
$result='';
if( isset($_POST['keyIndex'])){
$p=$_POST;
foreach( $p['keyIndex'] as $vl){
$result .= $vl.','.$p['Column1_'.$vl].','.$p['Column2_'.$vl].','.$p['Column3_'.$vl].','.$p['Select4_'.$vl].','.$p['Column5_'.$vl]."\n";
}
}
$option4='<option value="" disable selected >--Please Select--</option>'.
'<option value="1">Name1</option>'.
'<option value="2">Name2</option>';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script language="javascript">
var maxLine, cNm=Array('', 'Column1', 'Column2', 'Column3', 'Select4', 'Column5'), run_num=0;
function bodyonload(){
maxLine=document.frmMain.hdnMaxLine;
CreateNewRow();
}
function createCell(row, colnum,className,html){
var newCell = row.insertCell(colnum);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", className);
newCell.innerHTML = html;
}
function CreateNewRow(){
var
tb = document.getElementById('tbExp'),
ro = tb.insertRow(tb.rows.length),
html='', id, i;
maxLine.value=parseInt(maxLine.value) + 1;
ro.id ='row_'+(++run_num); id=ro.id;
for( i=0; i<cNm.length+2; i++){
switch(i){
case 0: html='<center>'+id+'<input type=hidden name="keyIndex[]" value="'+id+'"><center>'; break;
case 4: html='<center><select name="'+cNm[i]+'_'+id+'" ><?php echo $option4; ?></select></center>'; break;
default:
if(i<cNm.length){
html='<center><input type=text name="'+cNm[i]+'_'+id+'" ></center>';
}else if(i==cNm.length){
html = '<center><input type=button value="Show" onclick="show(\''+id+'\')" ></center>';
}else{
html = '<center><input type=button value="Delete" onclick="RemoveRow(\''+id+'\')" ></center>';
}
}
createCell(ro, i, 'css-name', html);
}
}
function RemoveRow( rowID ){
if(confirm('Do U want to delete '+rowID)==true){
var rowIndex = document.getElementById(rowID).rowIndex;
document.getElementById('tbExp').deleteRow(rowIndex);
maxLine.value = parse(maxLine.value) - 1;
}
}
function show( rowID ){
alert( rowID );
}
</script>
</head>
<body onload="bodyonload()">
<?php echo $result; ?>
<form name="frmMain" method="post">
<table border="1" cellpadding="2" cellspacing="2" class="table" id="tbExp" width="100%">
<tr>
<th align="center">Ref No.</th>
<th align="center">Column1</th>
<th align="center">Column2</th>
<th align="center">Column3</th>
<th align="center">Column4</th>
<th align="center">Column5</th>
<th align="center" colspan="2">Action</th>
</tr>
</table>
<input type="text" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input type="submit" value="Save" >
</form>
</body>
</html>
ประวัติการแก้ไข 2016-02-03 11:13:40
Date :
2016-02-03 11:07:38
By :
Chaidhanan
แล้ว ถ้าจะสร้าง table ให้กดเพิ่ม แบบนี้อีก table ก็เปลี่ยน ชื่อตาราง แล้วก้สร้าง function เพิ่มอีกใช่ไหมครับพี่
Date :
2016-02-03 11:17:15
By :
erlnw001
ทำแบบนั้นก็ได้ครับ แต่ถ้าทุกอย่างเหมือนกัน ต่างกันแค่ชื่อ ตาราง ลองแก้ฟังก์ชั่นให้ส่งชื่อตารางเข้าไปดีกว่าไหมครับ
Date :
2016-02-03 11:36:45
By :
Chaidhanan
ก้คือ ฟังค์ชั่นนั้น ใส่ชื่อตารางไป 2ตารางใช่ไหมครับพี่
Date :
2016-02-03 11:49:30
By :
erlnw001
30.function CreateNewRow(){
31.var
32.tb = document.getElementById('tbExp'),
จากตัวอย่างที่ทำแก้เป็น
Code (JavaScript)
function CreateNewRow(tbname){
var
tb = document.getElementById( tbname ),
ตัวปุ่มก็ใส่
button1 onclick=CreateNewRow('tbExp')
button2 onclick=CreateNewRow('tb2');
Code (JavaScript)
function RemoveRow( rowID ){
if(confirm('Do U want to delete '+rowID)==true){
var tr = document.getElementById(rowID);
var rowIndex = tr.rowIndex;
tr.parentNode().deleteRow(rowIndex);
maxLine.value = parse(maxLine.value) - 1;
}
}
สำหรับ parentNode ควรตรวจสอบก่อน นะครับ ว่า อ้างอิง ตารางถูกต้องหรือเปล่า บางทีจะอ้าง tbody ก่อน
ทดลองเอาเองนะครับ
Date :
2016-02-03 12:04:15
By :
Chaidhanan
ผมแก้ตามที่พี่บอกแล้วอ่ะครับ แต่พอ กด + ทั้ง2ตารางไม่มีอะไรเกิดขึ้นเลยอ่าครับ นี้ code ครับ
Code (PHP)
<?php
$result='';
if( isset($_POST['keyIndex'])){
$p=$_POST;
foreach( $p['keyIndex'] as $vl){
$result .= $vl.','.$p['Column1_'.$vl].','.$p['Column2_'.$vl].','.$p['Column3_'.$vl].','.$p['Select4_'.$vl].','.$p['Column5_'.$vl]."\n";
}
}
$option4='<option value="" disable selected >--Please Select--</option>'.
'<option value="1">Name1</option>'.
'<option value="2">Name2</option>';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script language="javascript">
var maxLine, cNm=Array('', 'Column1', 'Column2', 'Column3', 'Select4', 'Column5'), run_num=0;
function bodyonload(){
maxLine=document.frmMain.hdnMaxLine;
CreateNewRow();
}
function createCell(row, colnum,className,html){
var newCell = row.insertCell(colnum);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", className);
newCell.innerHTML = html;
}
function CreateNewRow(tbname){
var
tb = document.getElementById( tbname ),
ro = tb.insertRow(tb.rows.length),
html='', id, i;
maxLine.value=parseInt(maxLine.value) + 1;
ro.id ='row_'+(++run_num); id=ro.id;
for( i=0; i<cNm.length+2; i++){
switch(i){
case 0: html='<center>'+id+'<input type=hidden name="keyIndex[]" value="'+id+'"><center>'; break;
case 4: html='<center><select name="'+cNm[i]+'_'+id+'" ><?php echo $option4; ?></select></center>'; break;
default:
if(i<cNm.length){
html='<center><input type=text name="'+cNm[i]+'_'+id+'" ></center>';
}else if(i==cNm.length){
html = '<center><input type=button value="Show" onclick="show(\''+id+'\')" ></center>';
}else{
html = '<center><input type=button value="Delete" onclick="RemoveRow(\''+id+'\')" ></center>';
}
}
createCell(ro, i, 'css-name', html);
}
}
function RemoveRow( rowID ){
if(confirm('Do U want to delete '+rowID)==true){
var tr = document.getElementById(rowID);
var rowIndex = tr.rowIndex;
tr.parentNode().deleteRow(rowIndex);
maxLine.value = parse(maxLine.value) - 1;
}
}
</script>
</head>
<body onload="bodyonload()">
<?php echo $result; ?>
<form name="frmMain" method="post">
<table border="1" cellpadding="2" cellspacing="2" class="table" id="tbExp" width="100%">
<tr>
<th align="center">Ref No.</th>
<th align="center">Column1</th>
<th align="center">Column2</th>
<th align="center">Column3</th>
<th align="center">Column4</th>
<th align="center">Column5</th>
<th align="center" colspan="2">Action</th>
</tr>
</table>
<input type="text" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow('tbExp');">
<input type="submit" value="Save" >
</form>
<form name="frmMain" method="post">
<table border="1" cellpadding="2" cellspacing="2" class="table" id="tb2" width="100%">
<tr>
<th align="center">Ref No.</th>
<th align="center">Column1</th>
<th align="center">Column2</th>
<th align="center">Column3</th>
<th align="center">Column4</th>
<th align="center">Column5</th>
<th align="center" colspan="2">Action</th>
</tr>
</table>
<input type="text" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow('tb2');">
<input type="submit" value="Save" >
</form>
Date :
2016-02-03 13:04:32
By :
erlnw001
พี่ครับแล้วถ้าทำเป็น jquery จะง่ายกว่าไหมครับ พี่
Date :
2016-02-03 13:53:18
By :
erlnw001
จริงๆ ถ้ารู้หลักการ มันก็ง่ายทั้งหมดแหล่ะครับ
ถ้าโปรแกรมไม่เร่งร้อนอะไร ผมชอบเขียนแบบนี้มากกว่า
ไม่ต้องแบก bandwidth เยอะ
ลองสำรวจ jquery ดูครับว่ามันใหญ่ขนาดไหน มันแบกสารพัดสารเพไปทั้งหมด
พูดง่ายๆ ขี่ช้างจับตักแตน แต่ถ้าให้มันไปลิงค์ที่ jquery เลย ก็สบายไป
แต่มันไปพึ่งเขา เขาจะปิดเมื่อไหร่ก็ไม่รู้ หรือเขาจะเปลี่ยนเวอร์เป็น latest เมื่อไหร่
ต้องคอยตามคอยเปลี่ยนเวอร์ ถ้าขยันก็ว่ากันไปครับ
แต่ถ้า free bandwidth คิดว่าใช้แล้วคุ้มที่จะทำก็ง่ายดีครับ ส่วนที่เราเขียนก็น้อยลง
ก็เลือกเอาตามสภาพแวดล้อมครับ เหมาะที่จะทำแบบไหนก็ทำตามสดวกครับ
Date :
2016-02-03 15:50:47
By :
Chaidhanan
ขอบคณครับพี่ได้ความรู้ มากขึ้นเลยย ครับบบ ขอบคุณพี่มากๆๆครับ
Date :
2016-02-04 09:08:18
By :
erlnw001
Load balance : Server 05