|
 |
| |
jQuery clone tr แล้วมีปัญหากับ DatePicker หาที่เขียนบทความไม่เจอ เล่นมันตรงนี้แหละ |
| |
 |
|
|
 |
 |
|
วันนี้ เพื่อนถามว่า ทำไงดีจะเพิ่มแถมของเทเบิล ก็บอกไปว่าใช้ clone ของ jQuery ซิ มันก็ไปงมทำมาจนได้ จากนั้นสักพัก มันมาอีกแล้ว แล้วมันก็บอกว่า ทำไงวะ datepicker มันไมทำงาน ทำงานแต่แถวล่างสุด
ทีนี้แหละ งานเข้าเลย ไม่เคยทำด้วย
หลังจากที่ไม่สามารถเปิด docs ได้เพราะก็โดนฟายแถวนี้ใช้ NetCut และแล้ว ก็ได้เวลางมหาวิธีแก้ งมไปงมมาจนหาทางสว่างเจอ ดังนี้
Code (JavaScript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clone TR With DatePicker by PlaKriM ฉึกๆ</title>
<link type="text/css" href="jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
var options = {
dateFormat: 'yy/mm/dd',
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonText: 'คลิกเพื่อเลือกวันที่',
showOn: 'button',
buttonImage: 'jquery-ui-1.8.4.custom/images/date_picker.gif',
duration: 'fast'
};
$(function(){
$('.datepicker').datepicker(options);
$("img[src$='images/date_picker.gif']").mouseover(function() {
$(this).css('cursor','pointer');
});
$('#insert')
.click(function(){
$('#mytbl tbody tr')
.last().clone().prependTo("#mytbl tbody")
.find('.datepicker').each(function() {
$(this).next('img').remove();
$(this).removeAttr('id').removeClass('hasDatepicker').datepicker(options);
$("img[src$='images/date_picker.gif']").mouseover(function() {
$(this).css('cursor','pointer');
});
});
})
.css('cursor','pointer');
$('#delete')
.click(function(){
if($('#mytbl tbody tr').length > 1) $('#mytbl tbody tr').last().remove();
})
.css('cursor','pointer');
});
</script>
<style type="text/css">
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font:10px Tahoma, Geneva, sans-serif;}
</style>
</head>
<body>
<table id="mytbl" border="1" cellpadding="2" cellspacing="0">
<thead>
<tr>
<td align="center"><strong>Textbox</strong></td>
<td align="center"><strong>DropDown</strong></td>
<td align="center"><strong>DatePicker</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="a[]" /></td>
<td align="center">
<select type="text" name="b[]">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
</td>
<td><input type="text" name="c[]" class="datepicker" /></td>
</tr>
</tbody>
</table>
<input type="button" value="+" id="insert" />
<input type="button" value="-" id="delete" />
<div>
<strong>Note :</strong> รูปปฎิทินหาเอง Jquery Core and UI โหลดเอง ฉึกๆ
</div>
</body>
</html>
ยังไม่ได้เทสกับ browser อื่นนะครับเทสกับ firefox
ฝากไว้ เผื่อมีคนเจอปัญหา หรืออยากเอาไปปรับใช้
นอนละ 
Tag : PHP, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2010-09-23 04:02:53 |
By :
PlaKriM |
View :
2030 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุณครับน้องอั๋น
|
| |
|
|
| |
| Date :
2010-09-23 08:54:42 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ยินดีครับ
พี่วิน น่าจะใส่ลิงค์สำหรับเขียนบทความไว้ใน Profile หน่อยนะ หาไม่เจอ เผื่อคันมืออยากเขียนขึ้นมา เผื่อมีประโยชน์แถมยัง +10 อีก
|
| |
|
|
| |
| Date :
2010-09-23 10:31:28 |
By :
PlaKriM |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เดียวเดือนหน้าได้ใช้กันครับ ตอนนี้ขอ Clear เรื่องส่วนตัวให้เสร็จก่อนน่ะครับ
|
| |
|
|
| |
| Date :
2010-09-23 10:53:08 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลบ id ออกซะงั้น ปรกติการโคลนมันน่าจะสามารถโคลน event ได้ด้วยนะครับ ลอง clone(true);
|
| |
|
|
| |
| Date :
2010-09-23 10:57:34 |
By :
pjgunner.com |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองแล้วยังไม่ work ครับคุณเอี่ยว ต้องยำอีกสองสามอย่าง แค่นั้นมันไม่พอ
|
| |
|
|
| |
| Date :
2010-09-23 11:07:20 |
By :
PlaKriM |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณครับป๋า
|
| |
|
|
| |
| Date :
2010-09-23 11:21:01 |
By :
somparn |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
