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

Registered : 108,415

HOME > PHP > PHP Forum > สอบถาม การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery ครับ



 

สอบถาม การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery ครับ

 



Topic : 123242



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



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




ผมได้ทำการเพิ่มแถวในตารางข้อมูลครับ

p1

Code
<script language="javascript" src="js/jquery-2.1.4.min.js"></script>  
<script type="text/javascript">  
$(function(){  
    $("#addRow").click(function(){  
        $("#myTbl").append($("#firstTr").clone());  
    });  
    $("#removeRow").click(function(){  
        if($("#myTbl div").size()>1){  
            $("#myTbl div:last").remove();  
        }else{  
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");  
        }  
    });           
});  
</script>  

<div class="col-lg-12" id="myTbl">
                                
                                  <div class="row" id="firstTr">     
                        
                                        <div class="col-lg-3">
                    <div class="form-group"><label for='doctor_id'>แพทย์</label>
                      <select id='doctor_id' name='doctor_id' class='form-control'>
                      <?php
                        for($i=0;$i<$doctor_number;$i++) {
                          $d_id      = $doctor_data[$i]['doctor_id'];
                          $d_name    = $doctor_data[$i]['doctor_name'];
                          $d_nick    = $doctor_data[$i]['doctor_nick'];
                          $d_surname = $doctor_data[$i]['doctor_surname'];
                          echo "<option value='$d_nick'>$d_nick($d_name $d_surname)</option>";
                        }
                      ?>
                      </select>
                       </div>
                       </div> 
                            <div class="col-lg-2">
                          <div class="form-group">
                                        <label>วันที่</label>
        <div class="input-group date" id="datetimepicker1">
                    <input name="date-start" class="form-control input-sm"  type="text" required />
           <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
    
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
        locale: 'th', 
           format: "DD-MM-YYYY"
        });
               });
        </script>
    </div>
          
                       </div>

                          <div class='col-md-2'>
                    <div class='form-group'>
                      <label for='time_start'>เวลาเริ่มต้น</label>
                      <select id='time_start' name='time_start' class='form-control'>
                      <?php
                        for($i=0;$i<22;$i++) {
                          echo "<option value='$i'>".$time[$i]."</option>";
                        }
                      ?>
                      </select>
                    </div>
                  </div>

                          <div class='col-md-2'>
                    <div class='form-group'>
                      <label for='time_start'>เวลาสิ้นสุด</label>
                      <select id='time_start' name='time_start' class='form-control'>
                      <?php
                        for($i=1;$i<23;$i++) {
                          echo "<option value='$i'>".$time[$i]."</option>";
                        }
                      ?>
                      </select>
                    </div>
                  </div>

                   <div class='col-md-2'>
                    <div class='form-group'>
                      <label for='"locate'>สาขา</label>
                      <select id='"locate' name='"locate' class='form-control'>
                      <?php
                        for($i=0;$i<8;$i++) {
                          echo "<option value='$i'>".$locate[$i]."</option>";
                        }
                      ?>
                      </select>
                    </div>
                  </div>
                        </div>
                         </div>

พอกดลบมันเป็นยังงี้ครับ ผมต้องการให้ลบทั้งแถวที่เพิ่มขึ้นมาใหม่

p2

รบกวนชี้แนะด้วยครับ



Tag : PHP, JavaScript, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-06-08 11:33:47 By : circle2013 View : 2277 Reply : 8
 

 

No. 1



โพสกระทู้ ( 8,652 )
บทความ ( 2 )



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


เอาโค๊ดที่มันตรงกับภาษาครอบสิครับ จะได้อ่านง่าย ดู tag ก็ง่าย แบบนี้มึน
จะเป็นโปรแกรมเมอร์ แต่ไม่ช่างสังเกตจะไปรอดไหมครับเนี่ย
( อุตส่าห์คลิก ครอบทั้งทีก็น่าจะดูอันอื่นๆด้วยนะครับ)






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 11:53:24 By : Chaidhanan
 


 

No. 2



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



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


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2016-06-08 11:53:24
รายละเอียดของการตอบ ::
ขอโทษครับ ไปต่อไม่ได้เลยมาตั้งกระทู้ ผมทำงานในสาย IT Support ครับ เค้าให้เขียนเว็บผมก็ทำเท่าที่ได้นี่แหละครับ ไม่ได้ผมก็มาตั้งกระทู้ถาม

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 11:57:10 By : circle2013
 

 

No. 3

Guest


Code (PHP)
$("#myTbl div:last").remove(); 


มันจะมองหา div ตัวสุดท้ายที่อยู่ภายใต้ ไอดี myTbl ซึ่งมันก็จะลบ สาขา -> เวลาสิ้นสุด -> เวลาเริ่มต้นมาเรื่อย เมื่อคลิก ไล่มาเรื่อย

หากอยากลบทั้งแถว ไหน ๆ ก็โคลนมาละ

Code (PHP)
$("#firstTr:last").remove();


อย่างนี้เลยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 12:19:05 By : WiTT
 


 

No. 4



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



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


ตอบความคิดเห็นที่ : 3 เขียนโดย : WiTT เมื่อวันที่ 2016-06-08 12:19:05
รายละเอียดของการตอบ ::
ขอบคุณมากครับผม

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 12:46:40 By : circle2013
 


 

No. 5



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



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


ตอบความคิดเห็นที่ : 3 เขียนโดย : WiTT เมื่อวันที่ 2016-06-08 12:19:05
รายละเอียดของการตอบ ::
สอบถามต่อนิดหนึ่งครับคือพอกดเพิ่มแถวมาแล้ว ไม่สามารถกดเลือกวันที่ได้เลยครับ ต้องแก้ตรงส่วนไหนรบกวนด้วยครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 13:02:40 By : circle2013
 


 

No. 6



โพสกระทู้ ( 1,521 )
บทความ ( 2 )

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

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

ตอบความคิดเห็นที่ : 5 เขียนโดย : circle2013 เมื่อวันที่ 2016-06-08 13:02:40
รายละเอียดของการตอบ ::
$('#datetimepicker1').datetimepicker({....});
เพราะตัวที่สร้างมาใหม่ไม่ได้ถูกกำหนดให้เป็น Datepicker ครับ อจจะต้องกำหนดหลังจากที่เพิ่มแถวใหม่
Code (PHP)
$('div.date:last').datetimepicker({....});


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 13:26:23 By : Krungsri
 


 

No. 7



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



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


ID เป็น unique ห้ามซ้ำกัน
เปลี่ยน id="datetimepicker1"
เป็น class="datetimepicker"
Code (PHP)
<div class="input-group date" class="datetimepicker">
$('.datetimepicker').datetimepicker({
    locale: 'th',
    format: "DD-MM-YYYY"
});


ตอน clone สั่งให้ datepicker ทำงานอีกรอบ
หลักจาก jquery clone แล้วเพิ่มอีกรอบ
Code (JavaScript)
$('.datetimepicker').datetimepicker({
    locale: 'th',
    format: "DD-MM-YYYY"
});

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 13:33:12 By : fossil31
 


 

No. 8



โพสกระทู้ ( 8,652 )
บทความ ( 2 )



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


มีโค๊ดให้ลองศึกษาเรื่อง tag และ คลาส

css nth-child เฉพาะ element ที่มี name หรือ class หรือ tagname เหมือนกัน ภายใน parent เดียวกัน

โค๊ด $('#myTb>div') เครืองหมาย > เป็นการบอกว่าเอาเฉพาะชั้นลูก
$('#myTb>div>div') อ้างอิงชั้นหลาน ไม่เอาชั้นลูก
$('#myTb div') ถ้าเป็น วรรค จะอ้างอิงจาก ลูกหลาน ทั้งหมด

ส่วน ID ถ้าอยู่ภายใต้ tag เดียวกัน จะทำงานแค่อันแรก เสมอ ถ้าไม่ชำนาญในการอ้างอิงตามลำดับชั้น เลี่ยงการ อ้างอิง ID


Code (PHP)
<?php
if(isset($_REQUEST['xdata'])){
	print_r($_REQUEST['xdata']); exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Sample div clonning  & css nth-child</title>
<meta charset="utf-8">
<style>
input{width: 95%; border: 1px solid yellow; color: yellow; background-color: transparent; }
#myTb>div{ padding: 3px 20px 20px 3px; height: auto; vertical-align: middle; }
#myTb>div:nth-child(even){ background-color:#EEa;padding: 3px 20px 20px 3px;}
#myTb>div:nth-child(odd){ background-color:#EEE;padding: 3px 20px 20px 3px;}
#myTb>div>div{ background-color:#343434; display:inline-block; height: 22px;  width: 100px; cursor: pointer; text-align: center;}
#myTb>div>div:nth-child(1){ width: 120px;}
#myTb>div>div:nth-child(2){ color:#F0F;}
#myTb>div>div:nth-child(3){ color: #0FF;}
#myTb>div>div:nth-child(4){ color: #FF0;}
select{width: 95%; border: 1px solid darkblue; background-color: transparent; color: white; }
</style>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){  
    $("#addRow").click(function(){  
        $("#myTb").append($("#myTb>div:first").clone());
				$("#myTb>div:last").slideDown(500);
    });  
    $("#removeRow").click(function(){  
        if($("#myTb>div").size()>1){  
            $("#myTb>div:last").remove();  
        }  
    });
		$('#post').click(function(){
			var main_data = new Array();
			var record = $('#myTb>div'), ln = $(record).size()
			for (var idx=1; idx<ln; idx++){
				var ele = $(record).eq(idx);
				var sub_data = {
					slc: $(ele).find('select').eq(0).val(),
					div1: $(ele).find('div').eq(1).html(),
					div2: $(ele).find('div').eq(2).html(),
					div3: $(ele).find('div').eq(3).html()
				};
				main_data[main_data.length]=sub_data;
			};
			$.ajax({ type: 'POST', data: {xdata: main_data} }).done(function(msg){
				$('#result').html(msg);
			});
		}) 
}).delegate('#myTb>div>div', 'dblclick', function(){
	if(!$(this).is(':first-child')){
		$(this).html('<input type="text" value="'+$(this).html()+'">').find('input').eq(0).focus();
	}
}).delegate('input', 'change', function(){
	$(this).parent().html($(this).val());
}).delegate('input', 'focusout',function(){
	$(this).change();
});
</script>
</head>
<body>
<button id="addRow">+</button><button id="removeRow">-</button><button id="post">Post</button>
<div id="myTb" style="background-color:#aDD; padding: 20px 20px 20px 20px;">
	<div data-xyz="xyz"  style="display: none;">
		<div>
			<select >
			<option value="">Please Select</option>
			<option value=1 >name 1</option>
			<option value=2 >name 2</option>
			<option value=3 >name 3</option>
			<option value=4 >name 4</option>
			</select>
		</div>
		<div title="Doubleclick เพื่อใส่ข้อมูล">-</div>
		<div title="Doubleclick เพื่อใส่ข้อมูล">-</div>
		<div title="Doubleclick เพื่อใส่ข้อมูล">-</div>
	</div>
</div>
<div><pre id="result"></pre></div>
</body>
</html>



ประวัติการแก้ไข
2016-06-08 16:24:18
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-06-08 16:21:42 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถาม การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery ครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

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