Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > ต้องการทำปุ่มเพิ่มแถว สำหรับกรอกข้อมูลไปเรื่อยๆตามที่ต้องการ ยังไงครับ



 

ต้องการทำปุ่มเพิ่มแถว สำหรับกรอกข้อมูลไปเรื่อยๆตามที่ต้องการ ยังไงครับ

 



Topic : 113862



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์




จะทำปุ่ม เพิ่มแถวสำหรับกรอกข้อมูลเพิ่ม โดยการคลิกปุ่ม บวก หรือ เพิ่ม เข้าไปต้องใช้โค๊ดยังไงครับ

โค๊ดตารางที่ต้องการให้กดเพิ่มแถวได้

Code (PHP)
echo "<form action='index.php?module=material&action=purchase_order' method='post'>";
	
		echo "<table class='table table-striped'>";
			echo "<tr><th>ลำดับที่</th><th>รายการ</th><th>จำนวน</th><th>หน่วยนับ</th><th>ราคาต่อหน่วย</th><th>จำนวนเงิน</th></tr>";
			$cnt=5;
			for($i=1;$i<=$cnt;$i++){
			echo "<tr>
			<td align='center'>$i</td>
			<td align='center'><input type='text' name='mat_name' size='20'/></td>
			<td align='center'><input type='text' name='amount' size='4'/></td>
			<td align='center'><input type='text' name='unit_name' size='4'/></td>
			<td align='center'><input type='text' name='price_unit' size='4'/></td>
			<td align='center'><input type='text' name='total_price' size='4'/></td>
					</tr>";
			}		
		echo "</table>";
		echo "</form>";


รูปตาราง
แถวที่ต้องการเพิ่ม

ต้องการให้กดเพิ่มแล้ว มีแถว 6 7 8 .... ขึ้นมาตามที่ต้องการอะครับ



Tag : PHP, JavaScript






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-01-19 12:01:52 By : odafla View : 11952 Reply : 8
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook



JavaScript createElement Select and Get item from MySql Database
https://www.thaicreate.com/tutorial/javascript-createelement-select-and-get-item-from-mysql-database.html

createElement('select'); สร้าง Element ของ Select Option พร้อมกับ ดึงข้อมูลจาก MySQL Database ครับ
https://www.thaicreate.com/php/forum/048745.html


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-19 13:05:05 By : mr.win
 


 

No. 2



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ผมลองเอาไปใช้ดูแล้วครับตอนแรกก็ใช้ได้ปกติ(กด + ได้) ทีนี้ผมลองเอามาปรับปรุงตามที่ต้องการดูแล้วมันใช้ไม่ได้ครับ

แล้วตอนนี้พอลบออกหมดแล้วเอาโค๊ดที่พี่ให้มาไปใส่เมหือนเดิมมันใช้ไม่ได้แล้วอะครับ กด + เพิ่ม ไม่ขึ้นเลย ต้องตรวจสอบที่ตรงไหนหรอครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-21 09:19:44 By : odafla
 

 

No. 3

Guest


ต้องการแบบไหนครับ คล้ายๆแบบนี้ป่าว

<table id="myTable">
</table>
<br>
<button onclick="add_row()">+</button>
<button onclick="del_row()">-</button>
<script>
function add_row() {
    var table = document.getElementById("myTable");
    count_rows = table.getElementsByTagName("tr").length;

    var row = table.insertRow(count_rows);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = "<input type='text' name='txtA'"+count_rows+" value>";
    cell2.innerHTML = "<input type='text' name='txtB'"+count_rows+" value>";
}


function del_row(){
    var table = document.getElementById("myTable");
    count_rows = table.getElementsByTagName("tr").length;
    document.getElementById("myTable").deleteRow(count_rows-1);
}
</script>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-23 16:22:20 By : pgm
 


 

No. 4



โพสกระทู้ ( 455 )
บทความ ( 0 )



สถานะออฟไลน์


javascript console ช่วยท่านได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-23 18:02:55 By : yamcrocodile
 


 

No. 5



โพสกระทู้ ( 5,105 )
บทความ ( 4 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ลองไปรันเล่นดูครับ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
 
 <!--ชุดนี้ หาโหลดเอานะครับ -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<link href="css/sb-admin-2.css" rel="stylesheet">
     <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="js/plugins/metisMenu/metisMenu.min.js"></script>
    <script src="js/plugins/morris/raphael.min.js"></script>
    <script src="js/sb-admin-2.js"></script>
 <!--ชุดนี้ หาโหลดเอานะครับ -->

<style type="text/css">
.require{
	height:20px;
	color:#FF0000;
	padding-left:5px;
	padding-right:5px;
	font-size:12px;
	line-height:15px;
	width:220px;
	float:none;
}
</style>
</head>
<body>
<div id="page-wrapper">

            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">บันทึกข้อมูล ศษ.01</h1>
              </div>
           </div>
         
  <script>
$(function(){
	
	$("#studentID").keypress(function (e) {
  
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
               return false;
    }
   });
   
	
    $('#btnPluz').click(function(){
        var num=parseInt($('#number').val())+1;
		//alert(num);
		var tr=$("<tr id='tr"+num+"' rel='"+num+"'><td> <div class='row'><div class='col-lg-12'><div class='panel panel-default'><div class='panel-heading'>รายละเอียด คนที่ <span style='font-size:48px; color:#F00;'><b>"+num+"</b></span> <div class='row'><div class='col-lg-12' align='right'><button id='btnDel' rel='"+num+"' class='btn btn-danger'>ลบข้อมูล</button>&nbsp;&nbsp;<button type='submit' class='btn btn-warning' id='btnConfirm'>ยืนยัน</button>&nbsp;&nbsp;<button type='reset' class='btn btn-default'>Reset</button></div></div></div><div class='panel-body'><div class='row'><div class='col-lg-4'><div class='form-group'><label>รหัสนิสิต</label><input class='form-control'  id='studentID' type='text' name='studentID"+num+"' maxlength='8'/></div><div class='form-group'><label>คำนำหน้าชื่อ</label><div class='radio'><label><input type='radio' name='pname"+num+"' id='pname"+num+"' value='1' checked>นาย</label>&nbsp;&nbsp;<label><input type='radio' name='pname"+num+"' id='pname"+num+"' value='2'>นาง</label>&nbsp;&nbsp;<label><input type='radio' name='pname"+num+"' id='pname"+num+"'  value='3'>นางสาว</label></div></div><div class='form-group'><label>ชื่อ</label><input class='form-control' type='text' name='fname"+num+"'    /></div><div class='form-group'><label>นามสกุล</label><input class='form-control' type='text' name='lname"+num+"'    /></div><div class='form-group'><label>โทรศัพท์</label><input class='form-control' type='text' name='mobile"+num+"'    /></div></div></div></div></div><!-- xx--></div></div></div> <!-- div class='row'><div class='col-lg-12' align='right'><button id='btnDel' rel='"+num+"' class='btn btn-danger'>ลบข้อมูล</button>&nbsp;&nbsp;<button type='submit' id='btnConfirm' class='btn btn-warning'>ยืนยัน</button>&nbsp;&nbsp;</div></div --> </td></tr>");
		$('#addRow tr:first').before(tr);
        $('#number').val(num);
		$("#studentID").keypress(function (e) {
       		if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
   			}
   			});
      });


     $('#addRow').on('click','#btnDel',function(){
		var num=parseInt($('#number').val())-1;
        var rel=$(this).attr('rel');
		var rowCount = $('#addRow>tr').length;
		 var i=rowCount;
		$('#number').val(num);
        $("#tr"+rel+"").remove();
     	$('#addRow span').each(function(index, element) {
            --i
		     $(this).text(i);
		});
    });
	
	
});

</script>

<script type="text/javascript">
$(function(){
	
	$('#ss01').on('click','#btnConfirm',function(){	
			
			var chk_true = 0;
			var chk_false = 0;
			var chk_all = 0;
			var i =  1;
		
		$("input[name*='studentID']").each(function(){
			
				++chk_all
			

			var valStudent = $(this).val();
			
				
			if( valStudent.length < 7 ){
		
				$('p[rel='+i+']').remove();
				$("input[name='studentID"+i+"']").after("<p class='require' rel='"+i+"'>กรอกรหัสนิสิตไม่ครบ 8 หลัก "+i+"</p>");
				++chk_false
				++i
				}
				else{
				++chk_true
				++i
				}
		
			
	});//ปิด name*
	/*
alert("ค่าผิด "+chk_false);
alert("ค่าถูก "+chk_true);	
alert("ค่าทั้งหมด "+chk_all);		
*/

if(chk_true == chk_all){
	return true;
}else{
	$("#studentID").focus();
	return false;
}
		
		
	});//ปิด form
}); //ปิด function
</script>


    <form role="form" name="ss01" id="ss01" class="form-group" method="post" action="?menu=insert">          
	
<table class="table table-bordered table-condensed">
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
       
         <tr>
            <td>
            <div class="row">
            <div class="col-lg-9">&nbsp;</div>
                
              <div class="col-lg-1">
              <div class="form-group"><input name="forLoop" type="text" class="form-control input-mini" id="number" value="1" maxlength="2" style="color:red;" readonly>
              </div>
            </div>
            
             <div class="col-lg-2">
              <div class="form-group">
			<button type="button" id="btnPluz" class="btn btn-success">เพิ่มการบันทึก</button>
			</div>
            </div>
                        
            </div>
            </td>
        </tr>
   

</div></div></div>
</table>

<table class="table table-bordered table-condensed">
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
      <tbody id="addRow">
      <tr id="tr1" rel="1"></tr>
   </tbody> 
            </div></div></div>
</table>


<table class="table table-bordered table-condensed">
				
			<tbody>
			<tr><td>
            <div class="row">
                <div class="col-lg-12">
                        <div class="panel panel-default">
                    
                        <div class="panel-heading">
                            รายละเอียด คนที่ <span style="font-size:48px; color:#F00;"><b>1</b></span>
                            <div class="row">
<div class="col-lg-12" align="right">
<!-- input type="submit" id="btnConfirm" class="btn btn-warning" value="ยืนยัน" -->
<button type="submit" class="btn btn-warning" id="btnConfirm" >ยืนยัน</button>
 </div>
 </div>
                        </div>
                        
                        
                        <div class="panel-body">
                            <div class="row">
                             
                                <div class="col-lg-4">
                                   
                                        <div class="form-group">
                                            <label>รหัสนิสิต</label>
                                            <input name="studentID1" type="text" class="form-control" id="studentID" maxlength="8" />
                                            
                                        </div>

                                    
                                    <div class="form-group">
                                            <label>คำนำหน้าชื่อ</label>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="pname1" id="pname1" value="1" checked>นาย
                                                </label>&nbsp;&nbsp;
                                            
                                                <label>
                                                    <input type="radio" name="pname1" id="pname2" value="2">นาง
                                                </label>&nbsp;&nbsp;
                                            
                                                <label>
                                                    <input type="radio" name="pname1" id="pname3" value="3">นางสาว
                                                </label>
                                            </div>
                                  </div>
                                        
     <div class="form-group">
                                            <label>ชื่อ</label>
                                            <input class="form-control" type="text" name="fname1"    />
                                           
                                  </div>
                                        
                                             <div class="form-group">
                                            <label>นามสกุล</label>
                                            <input class="form-control" type="text" name="lname1"    />
                                           
                                        </div>

                                             <div class="form-group">
                                            <label>โทรศัพท์</label>
                                            <input class="form-control" type="text" name="mobile1"    />
                                           
                                        </div>
                                                                            
                                </div>
							 </div><!-- /.row (nested) -->
                            </div><!-- /.panel-body -->
                        </div></div>
                     
                        
                        
  </div>
</div>
</td>
</tr>
	</tbody>
    
	  </table>
            
  <div class="row">
<div class="col-lg-12" align="right">
 </div>
 </div>
 <br>
  </form>
</div>


        
        <!-- /#page-wrapper -->
		
		</body></html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-24 09:42:27 By : apisitp
 


 

No. 6



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณทุกท่านครับ เดี๊ยวจะลองไปปรับใช้ดูครับ

ปล.ไม่ได้เปิดคอมหลายวัน ขออภัยที่ตอบช้าครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-26 08:18:01 By : odafla
 


 

No. 7



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ลองเอาของความเห็นที่ 3 ไปใช้แล้วครับ โอเคเลย แต่ตอนนี้ติดตรงที่เวลาจะบันทึกลงฐานข้อมูล จะทำยังไงให้มันเข้าทุกค่าครับ
คือตอนนี้ลองส่งค่ามาแล้วมันมาตัวเดียวน่ะครับ


ประวัติการแก้ไข
2015-01-26 08:35:48
2015-01-26 10:34:27
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-26 08:34:07 By : odafla
 


 
ตอบความคิดเห็นที่ : 5 เขียนโดย : apisitp เมื่อวันที่ 2015-01-24 09:42:27
รายละเอียดของการตอบ ::
... ใส่ความคิดเห็นตรงนี้.......
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-10-28 11:02:16 By : chaowalit
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ต้องการทำปุ่มเพิ่มแถว สำหรับกรอกข้อมูลไปเรื่อยๆตามที่ต้องการ ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่