|
 |
| |
สอบถามปัญหา jquery ครับ....เรื่องการเรียกใช้งาน Class ใน คำสั่ง append ครับ |
| |
 |
|
|
 |
 |
|
ผมทำ 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>
แผนปฏิบัติราชการประจำปี 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>
กิจกรรม
</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 :
308 |
Reply :
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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากครับผม
|
| |
|
|
| |
| Date :
2023-12-07 20:43:14 |
By :
Tipat1234 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
