Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > สอบถามปัญหา jquery ครับ....เรื่องการเรียกใช้งาน Class ใน คำสั่ง append ครับ

[PHP] สอบถามปัญหา jquery ครับ....เรื่องการเรียกใช้งาน Class ใน คำสั่ง append ครับ

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

Sun

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

ผมทำ form input ข้อมูล โดยให้ผู้ใช้ สามารถเพิ่มจำนวนช่อง input ได้โดยใช้คำสั่ง append แต่ class ที่เรียกใช้ปฏิทินไม่ทำงานครับ

รบกวนขอคำแนะนำครับ

Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard</title>
 
  <!-- import CSS -->
  <?php include 'pages/import_css.html'; ?>
 
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
 
  <!-- Preloader -->
  <div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>
 
  <!-- navbar -->
  <?php include 'pages/navbar.html' ?>
 
  <!-- sidebar -->
  <?php include 'pages/sidebar.html' ?>
 
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Dashboard v1</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
 
    <!-- Main content -->
    <section class="content">
      <div class="content-fluid">
        <form action=""> 
        <!-- Main row -->
        <div class="row">
          <section class="col-lg-12 connectedSortable">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-solid fa-list-ul"></i>&nbsp;
                  แผนปฏิบัติราชการประจำปี 2566
                </h3>
              </div>
              <div class="card-body">                
                <div class="row">
                  <div class="form-group col-lg-12">
                    <label for="">ส่วนราชการ</label>
                    <input type="text" class="form-control" id="" placeholder="ส่วนราชการ">
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-lg-6">
                    <label for="">รายการ</label>
                    <input type="text" class="form-control" id="">
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="">งบประมาณ (บาท)</label>
                    <input type="text" class="form-control" id="">
                  </div>
                </div>
              </div><!-- /.card-body -->
            </div>
 
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-solid fa-check-double"></i>&nbsp;
                  กิจกรรม
                </h3>
              </div>
              <div class="card-body">                
                <div class="form-group">
                <form name="plane_01" id="plane_01">
                  <div class="container-fluid" id="table_01">
                  <table class="table table-borderless table-hover" id="dynamic_field" style="width:100%">
                    <tr>
                      <td colspan="2" style="width:40%">
                        <label>1. ขั้นตอน</label>
                        <input type ="text" class="form-control">
                      </td>
                      <td>
                        <label >ระยะเวลา(วัน) </label>
                        <input type ="number" class="form-control">
                      </td>
                      <td>
                        <label >วันที่เริ่มดำเนินการ </label>
                        <input type="text" class="form-control select_date" name="born" id=""/>
                      </td>
                      <td>
                        <label >วันที่ดำเนินการแล้วเสร็จ </label>
                        <input type="text" class="form-control select_date" name="born" id=""/>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <label >ผู้รับผิดชอบ </label>
                        <input type ="text" class="form-control">
                      </td>
                      <td colspan="3">
                        <label >ความเสี่ยง </label>
                        <input type ="text" class="form-control">
                      </td>
                    </tr>
                  </table>
                  </div>
                  <table >
                    <tr>
                      <td>
                        <button type="button" id="btn" class="btn btn-success"><i class="fas fa-solid fa-plus"></i></button>
                        <button type="button" name="removeRow" id="removeRow" class="btn btn-danger "><i class="fas fa-solid fa-minus btn_remove"></i></button>
                      </td>
                    </tr>
                  </table>                 
                </form>
                </div> 
              </div><!-- /.card-body -->
            </div>
          </div>
          </section>
        </div>
        </form>
    </section>
  </div>
</div>
<!-- ./wrapper -->
 
<!-- import Script -->
<?php include 'pages/import_script.html'; ?>
 
<script src="datetimepicker-master/jquery.datetimepicker.full.js"></script>
<!-- <script src="pages/UI/datetimepicker.js"></script> -->
 
<script>
  $(document).ready(function(){
    var a = 1 ;
  
    $("#btn").click(function(){
      a++;
      if(a % 2 == 0){
        $("#table_01").append('<table class="table table-borderless table01 table-secondary table-hover" id="add_field" style="width:100%"><tr><td colspan="2" style="width:40%"><label>'+a+'. ขั้นตอน</label><input type ="text" class="form-control"></td><td><label >ระยะเวลา(วัน) </label><input type ="number" class="form-control"></td><td id="date01"><label>วันที่เริ่มดำเนินการ </label><input type ="text" id ="input_01" class="form-control select_date"></td><td><label >วันที่ดำเนินการแล้วเสร็จ </label><input type ="text" class="form-control select_date"></td></tr><tr><td colspan="2"><label >ผู้รับผิดชอบ </label><input type ="text" class="form-control"></td><td colspan="3"><label >ความเสี่ยง </label><input type ="text" class="form-control"></td></tr></table>');
         
      }else{
        $("#table_01").append('</div><table class="table table-borderless table01 table-hover" id="add_field" style="width:100%"><tr><td colspan="2" style="width:40%"><label>'+a+'. ขั้นตอน</label><input type ="text" class="form-control"></td><td><label >ระยะเวลา(วัน) </label><input type ="number" class="form-control"></td><td><label >วันที่เริ่มดำเนินการ </label><input type ="text" class="form-control select_date"></td><td><label >วันที่ดำเนินการแล้วเสร็จ </label><input type ="date" class="form-control select_date"></td></tr><tr><td colspan="2"><label >ผู้รับผิดชอบ </label><input type ="text" class="form-control"></td><td colspan="3"><label >ความเสี่ยง </label><input type ="text" class="form-control"></td></tr></table>');
      } 
    }); 
    $("#removeRow").click(function(){
      a--;
      $(".table01:last").remove();   
      //$(a).remove();   
    });
  });
 
  // datetimepicker#1
  $(function(){
    $.datetimepicker.setLocale('th'); // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.      
      // กรณีใช้แบบ input
      $(".select_date").datetimepicker({
      timepicker:false,
      format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000            
      lang:'th',  // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
      onSelectDate:function(dp,$input){
        var yearT=new Date(dp).getFullYear()-0;  
        var yearTH=yearT+543;
        var fulldate=$input.val();
        var fulldateTH=fulldate.replace(yearT,yearTH);
        $input.val(fulldateTH);
        },
      });       
 
      // กรณีใช้กับ input ต้องกำหนดส่วนนี้ด้วยเสมอ เพื่อปรับปีให้เป็น ค.ศ. ก่อนแสดงปฏิทิน
      $(".select_date").on("mouseenter mouseleave",function(e){
        var dateValue=$(this).val();
        if(dateValue!=""){
        var arr_date=dateValue.split("-"); // ถ้าใช้ตัวแบ่งรูปแบบอื่น ให้เปลี่ยนเป็นตามรูปแบบนั้น
        // ในที่นี้อยู่ในรูปแบบ 00-00-0000 เป็น d-m-Y  แบ่งด่วย - ดังนั้น ตัวแปรที่เป็นปี จะอยู่ใน array
        //  ตัวที่สอง arr_date[2] โดยเริ่มนับจาก 0 
        if(e.type=="mouseenter"){
          var yearT=arr_date[2]-543;
        }       
        if(e.type=="mouseleave"){
          var yearT=parseInt(arr_date[2])+543;
        }   
        dateValue=dateValue.replace(arr_date[2],yearT);
        $(this).val(dateValue);                                                 
        }       
      });
  });
 
</script>
 
</body>
</html>

Tag : PHP, HTML, jQuery, Google Chrome

Date : 2023-12-07 10:02:38

By : Tipat1234

View : 359

Reply : 2

No. 1

Chaidhanan

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

ข้อผิดผลาด ที่ต้องแก้ไข
1 ID ที่สร้างใหม่ ต้องต่างกัน
2 สำหรับ datetimepicker เมื่อเพิ่ม object ต้อง binding function ให้กับมันทุกครั้ง
( ผมยังไม่เคยเขียน ในรูปแบบ on หรือ deligate ได้ ขี้เกียจหา)
Code (JavaScript)

var newobject = $('<table .....>.....</table>');
$('#table-01').append( newobject )
$(newobject).datepicker({ 
....
....
});

3 function นี้
$(".select_date").on("mouseenter mouseleave",function(e){
ย้ายไปต่อ
$(documnt).ready()=>{
...
...
}).delegate( ".select_date", "mouseenter mouseleave",function(e){

Date : 2023-12-07 15:45:39

By : Chaidhanan

No. 2

Sun

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

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

Date : 2023-12-07 20:43:14

By : Tipat1234

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามปัญหา jquery ครับ....เรื่องการเรียกใช้งาน Class ใน คำสั่ง append ครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)