Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

circle2013

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

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

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>

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

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

Tag : PHP, JavaScript, jQuery

Date : 2016-06-08 11:33:47

By : circle2013

View : 3858

Reply : 8

No. 1

Chaidhanan

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

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

Date : 2016-06-08 11:53:24

By : Chaidhanan

No. 2

circle2013

โพสกระทู้ ( 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

circle2013

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

ตอบความคิดเห็นที่ : 3 เขียนโดย : WiTT เมื่อวันที่ 2016-06-08 12:19:05

รายละเอียดของการตอบ ::

ขอบคุณมากครับผม

Date : 2016-06-08 12:46:40

By : circle2013

No. 5

circle2013

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

ตอบความคิดเห็นที่ : 3 เขียนโดย : WiTT เมื่อวันที่ 2016-06-08 12:19:05

รายละเอียดของการตอบ ::

สอบถามต่อนิดหนึ่งครับคือพอกดเพิ่มแถวมาแล้ว ไม่สามารถกดเลือกวันที่ได้เลยครับ ต้องแก้ตรงส่วนไหนรบกวนด้วยครับ

Date : 2016-06-08 13:02:40

By : circle2013

No. 6

Krungsri

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

ตอบความคิดเห็นที่ : 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

xMan

โพสกระทู้ ( 484 )
บทความ ( 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

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 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 ครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก