|
 |
| |
ช่วยหน่อยเถอะนะค่ะ กดปุ่มเพิ่มรายการ แล้วให้เพิ่มแถวในตาราง จะทำยังไงค่ะ |
| |
 |
|
|
 |
 |
|
วิธีการเพิ่มตาราง มันมีหลายวิธีน่ะครับ
อันนี้เป็นอีกวิธี เป็นการโคลนครับ
ข้อดีมันคือเขียนง่ายสุด แหง่มๆ 
แต่ข้อเสียคือมันจะโคลนข้อมูลมาด้วย
Code (PHP)
<script type="text/javascript">
function fncAdd(){
var tb = document.getElementById('tbl');
var tbody = document.createElement('tbody'); // fixed IE :>
tb.insertBefore(tbody, null);
var clone=document.getElementById('cln').cloneNode(true);
tbody.insertBefore(clone,null);
}
function fncDelete(){
var tb =document.getElementById('tbl');
var del = tb.rows.length;
if(del>1){
tb.deleteRow(del-1);
}
}
</script>
<form id="frm">
<table id="tbl" border=1>
<tr><td>ลำดับที่</td><td>รายการ</td><td>สี</td><td>ขนาด</td><td>จำนวน</td><td>หมายเหตุ</td><td>สถานะ</td></tr>
<tr id="cln" >
<td></td>
<td>
<select name="list">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="color">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="sizable">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="amount">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<textarea rows=3 cols=15 name="note"></textarea>
</td>
<td>
<select name="status">
<option value="val1">yes</option>
<option value="val2">no</option>
</select>
</td>
</table>
<input type="button" value="ADD" onclick="fncAdd()">
<input type="button" value="DEL" onclick="fncDelete()">
</form>
และอีกวิธีคือการสร้าง element ค่อนข้างจะสากลหน่อยครับแต่ก็เขียนเยอะไปด้วย รอแปปครับเดียวจะเขียนให้ดู
|
 |
 |
 |
 |
| Date :
2009-11-09 21:18:27 |
By :
xbeginner01 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
<table id="abc">
</table>
<input type="button" id="add_table_rows">
<script type="text/javascript">
$('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('#abc');
</script>
ปล. แค่ตัวอย่างการใช้ jquery อย่างง่ายๆ
|
| |
|
|
| |
| Date :
2009-11-09 21:37:19 |
By :
pjgunner |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โค้ดนี้เป็นการสร้าง element
ข้อดี ดูง่ายเข้าใจง่าย (รึเปล่า อิอิ)
ข้อเสีย เข้าใจยากสำหรับมือใหม่ ,กรณีที่ต้องสร้างหลาย element โค้ดก็เขียนเยอะตามด้วย แต่ก็มีวิธีแก้น่ะเขียนฟังก์ชันการ createElement ครับ แล้วผมคิดว่าหลาย framework น่าจะมีฟังก์ชันนี้อยู่น่ะ 
Code (PHP)
<script type="text/javascript">
function fncAdd(){
var tb = document.getElementById('tbl');
var tbody = document.createElement('tbody');
tb.insertBefore(tbody, null);
tr = document.createElement("tr");
tbody.insertBefore(tr, null);
td = document.createElement("td");
var id = document.createTextNode("ลำดับที่");
td.insertBefore(id, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var se = document.createElement("select");
se.setAttribute('name','list');
se.options[0] = new Option("selection 1","value 1");
se.options[1] = new Option("selection 2","value 2");
se.options[2] = new Option("selection 3","value 3");
se.options[3] = new Option("selection 4","value 4");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','color');
se.options[0] = new Option("selection 1","value 1");
se.options[1] = new Option("selection 2","value 2");
se.options[2] = new Option("selection 3","value 3");
se.options[3] = new Option("selection 4","value 4");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','size');
se.options[0] = new Option("selection 1","value 1");
se.options[1] = new Option("selection 2","value 2");
se.options[2] = new Option("selection 3","value 3");
se.options[3] = new Option("selection 4","value 4");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','amount');
se.options[0] = new Option("selection 1","value 1");
se.options[1] = new Option("selection 2","value 2");
se.options[2] = new Option("selection 3","value 3");
se.options[3] = new Option("selection 4","value 4");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var txtarea = document.createElement("textarea");
txtarea.setAttribute('rows',2);
txtarea.setAttribute('cols',15);
td.insertBefore(txtarea, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','status');
se.options[0] = new Option("yes","value 1");
se.options[1] = new Option("no","value 2");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
tb.appendChild(tbody);
}
function fncDelete(){
var tb =document.getElementById('tbl');
var del = tb.rows.length;
if(del>2){
tb.deleteRow(del-1);
}
}
</script>
<form id="frm">
<table id="tbl" border=1>
<tr><td>ลำดับที่</td><td>รายการ</td><td>สี</td><td>ขนาด</td><td>จำนวน</td><td>หมายเหตุ</td><td>สถานะ</td></tr>
<tr>
<td>ลำดับที่</td>
<td>
<select name="list">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="color">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="sizable">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<select name="amount">
<option value="val1">select1</option>
<option value="val2">select2</option>
<option value="val2">select3</option>
</select>
</td>
<td>
<textarea rows=2 cols=15 name="note"></textarea>
</td>
<td>
<select name="status">
<option value="val1">yes</option>
<option value="val2">no</option>
</select>
</td>
</tr>
</table>
<input type="button" value="ADD" onclick="fncAdd()">
<input type="button" value="DEL" onclick="fncDelete()">
</form>
|
| |
|
|
| |
| Date :
2009-11-09 21:39:26 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
xbeginner01 ขอบคุณมากๆนะค่ะมีเอามาให้เลือกหลายรูปแบบ จะพยายามศึกษาให้เข้าใจ ถ้าไม่เข้าใจจะถามใหม่นะค่ะ
|
| |
|
|
| |
| Date :
2009-11-10 08:06:05 |
By :
หยก |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อยากทราบว่าโค้ดนี้จะเก็บข้อมูลลงฐานข้อมูลยังไงค่ะ ทำเอง งงเอง
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>
<body>
<SCRIPT TYPE="text/javascript">
function fncAdd(){
var tb = document.getElementById('tbl');
var tbody = document.createElement('tbody');
tb.insertBefore(tbody, null);
tr = document.createElement("tr");
tbody.insertBefore(tr, null);
td = document.createElement("td");
var lastRow = tbl.rows.length-1;
var iteration = lastRow;
var txt = document.createElement('input');
txt.type = 'text';
txt.name = 'item' + iteration;
txt.id = 'item' + iteration;
txt.value=iteration;
txt.size = 4;
td.insertBefore(txt, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var se = document.createElement("select");
se.setAttribute('name','list'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','color'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','size'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','qty'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var txtarea = document.createElement("textarea");
txtarea.setAttribute('name','remark'+ iteration);
txtarea.setAttribute('rows',2);
txtarea.setAttribute('cols',30);
td.insertBefore(txtarea, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','status'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[1] = new Option("ไม่มีสินค้า","value ไม่มีสินค้า");
se.options[2] = new Option("ดำเนินการเรียบร้อย","value ดำเนินการเรียบร้อย");
se.options[3] = new Option("รอดำเนินการ","value รอดำเนินการ");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
tb.appendChild(tbody);
}
function fncDelete(){
var tb =document.getElementById('tbl');
var del = tb.rows.length;
if(del>2){
tb.deleteRow(del-1);
}
}
</SCRIPT>
<form id="form1" name="form1" method="post" action="test1.php">
<table width="805" border="1" id="tbl">
<tr>
<th width="46"> <div align="center"><strong>ลำดับที่</strong></div></th>
<th width="110"> <div align="center"><strong>รายการ</strong></div></th>
<th width="84"> <div align="center"><strong>สี</strong></div></th>
<th width="83"> <div align="center"><strong>ขนาด</strong></div></th>
<th width="84"> <div align="center"><strong>จำนวน</strong></div></th>
<th width="211"> <div align="center"><strong>หมายเหตุ</strong></div></th>
<th width="140"> <div align="center"><strong>สถานะ</strong></div></th>
</tr>
<tr>
<td><label>
<input name="item" type="text" id="item" value="1" size="4" />
</label></td>
<td><label>
<div align="left">
<select name="list" id="list">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</label>
</div></td>
<td><label>
<div align="left">
<select name="color" id="color">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</label>
</div></td>
<td><label>
<div align="left">
</label>
<select name="size" id="size">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</div></td>
<td align="right"><label>
<div align="left">
<select name="qty" id="qty">
<option>--เลือก--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
</label>
</div></td>
<td align="right"><div align="left">
<textarea name="remark" cols="30" rows="2" id="remark"></textarea>
</div></td>
<td align="right"><label>
<div align="left">
<select name="status" id="status">
<option selected="selected">--เลือก--</option>
<option value="ไม่มีสินค้า">ไม่มีสินค้า</option>
<option value="ดำเนินการเรียบร้อย">ดำเนินการเรียบร้อย</option>
<option value="รอดำเนินการ">รอดำเนินการ</option>
</select>
</label>
</div></td>
</tr>
</table>
<p>
<INPUT TYPE="button" VALUE="เพิ่มรายการ" onClick="fncAdd()">
<INPUT TYPE="button" VALUE="ลบรายการ" onClick="fncDelete()">
<label></label>
<label></label>
</p>
</FORM>
</body>
</html>
|
| |
|
|
| |
| Date :
2009-11-10 09:25:53 |
By :
หยก |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้โปรดดดดดดดดด ช่วยตอบหน่อยนะค่ะ
รออยู่ค่ะ
|
| |
|
|
| |
| Date :
2009-11-10 10:00:31 |
By :
หยก |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แบบว่าก้อยังไม่เข้าใจอยู่ดีอ่ะค่ะ
|
| |
|
|
| |
| Date :
2009-11-10 10:13:01 |
By :
หยก |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมจะแสดงโชว์ข้อมูลให้ดูน่ะครับ เอาแบบง่ายๆเลย ไม่อยากทำซับซ้อนเดียวจะงงไปกันใหญ่
อธิบาย: เป็นการสร้าง input:hidden เก็บหมายเลขแถวเพื่อจะได้แสดงข้อมูลแต่ละแถว
แก้ข้อความสีแดงข้างล่างนี้น่ะ
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>
<body>
<SCRIPT TYPE="text/javascript">
function fncAdd(){
var tb = document.getElementById('tbl');
var tbody = document.createElement('tbody');
tb.insertBefore(tbody, null);
tr = document.createElement("tr");
tbody.insertBefore(tr, null);
td = document.createElement("td");
var lastRow = tb.rows.length-1; // แก้ tbl เป็น tb
var iteration = lastRow;
var txt = document.createElement('input');
txt.type = 'text';
txt.name = 'item' + iteration;
txt.id = 'item' + iteration;
txt.value=iteration;
txt.size = 4;
td.insertBefore(txt, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var se = document.createElement("select");
se.setAttribute('name','list'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','color'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','size'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','qty'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
td = document.createElement("td");
var txtarea = document.createElement("textarea");
txtarea.setAttribute('name','remark'+ iteration);
txtarea.setAttribute('rows',2);
txtarea.setAttribute('cols',30);
td.insertBefore(txtarea, null);
tr.insertBefore(td, null);
td = document.createElement("td");
se =document.createElement("select");
se.setAttribute('name','status'+ iteration);
se.options[0] = new Option("--เลือก--","value 0");
se.options[1] = new Option("ไม่มีสินค้า","value ไม่มีสินค้า");
se.options[2] = new Option("ดำเนินการเรียบร้อย","value ดำเนินการเรียบร้อย");
se.options[3] = new Option("รอดำเนินการ","value รอดำเนินการ");
se.options[0].selected =1;
td.insertBefore(se, null);
tr.insertBefore(td, null);
tb.appendChild(tbody);
document.getElementById('num_rows').value=iteration; // เก็บจำนวนแถวไว้ที่ num_rows
}
function fncDelete(){
var tb =document.getElementById('tbl');
var del = tb.rows.length;
if(del>2){
tb.deleteRow(del-1);
document.getElementById('num_rows').value=del-1;
}
}
</SCRIPT>
<form id="form1" name="form1" method="post" action="test1.php">
<input type="hidden" id="num_rows" name="num_rows" value=1> <!-- สร้าง input:hidden เก็บค่าจำนวนแถว เพื่อเอาไปแสดงผลต่อไป -->
<table width="805" border="1" id="tbl">
<tr>
<th width="46"> <div align="center"><strong>ลำดับที่</strong></div></th>
<th width="110"> <div align="center"><strong>รายการ</strong></div></th>
<th width="84"> <div align="center"><strong>สี</strong></div></th>
<th width="83"> <div align="center"><strong>ขนาด</strong></div></th>
<th width="84"> <div align="center"><strong>จำนวน</strong></div></th>
<th width="211"> <div align="center"><strong>หมายเหตุ</strong></div></th>
<th width="140"> <div align="center"><strong>สถานะ</strong></div></th>
</tr>
<tr>
<td><label>
<input name="item1" type="text" id="item" value="1" size="4" />
</label></td>
<td><label>
<div align="left">
<select name="list1" id="list">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</label>
</div></td>
<td><label>
<div align="left">
<select name="color1" id="color">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</label>
</div></td>
<td><label>
<div align="left">
</label>
<select name="size1" id="size">
<option value="0">--เลือก--</option>
<option value="1">1</option>
</select>
</div></td>
<td align="right"><label>
<div align="left">
<select name="qty1" id="qty">
<option>--เลือก--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
</label>
</div></td>
<td align="right"><div align="left">
<textarea name="remark1" cols="30" rows="2" id="remark"></textarea>
</div></td>
<td align="right"><label>
<div align="left">
<select name="status1" id="status">
<option selected="selected">--เลือก--</option>
<option value="ไม่มีสินค้า">ไม่มีสินค้า</option>
<option value="ดำเนินการเรียบร้อย">ดำเนินการเรียบร้อย</option>
<option value="รอดำเนินการ">รอดำเนินการ</option>
</select>
</label>
</div></td>
</tr>
</table>
<p>
<INPUT TYPE="button" VALUE="เพิ่มรายการ" onClick="fncAdd()">
<INPUT TYPE="button" VALUE="ลบรายการ" onClick="fncDelete()">
<label></label>
<label></label>
</p>
<input type="submit">
</FORM>
</body>
</html>
ตัวอย่าง test1.php แสดงข้อมูลแต่ละแถว
test1.php(PHP)
<?php
echo "จำนวนแถว :". $_POST['num_rows']."<BR>";
echo " แสดงข้อมูล<BR>";
for($i=1;$i<=$_POST['num_rows'];$i++){
$item= $_POST['item'.$i];
$list=$_POST['list'.$i];
$color=$_POST['color'.$i];
$size=$_POST['size'.$i];
$qty=$_POST['qty'.$i];
$remark=$_POST['remark'.$i];
$status=$_POST['status'.$i];
echo "$item $list $color $size $qty $remark $status <br/>";
//mysql_query("insert into tblxxxx values('$item','$list','$color','$qty','$remark','$status')");
}
?>
ที่เหลือก็ดัดแปลงลงฐานข้อมูลครับ คงไม่ยากแหล่ะ 
|
| |
|
|
| |
| Date :
2009-11-10 21:51:40 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
