PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สอบถามเรื่อง datepicker bootrap ใส่ใน textbox ที่สามารถเพิ่มแถวได้ พอกดเพิ่มแถวแล้ว sricpt ไม่ทำงานครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่อง datepicker bootrap ใส่ใน textbox ที่สามารถเพิ่มแถวได้ พอกดเพิ่มแถวแล้ว sricpt ไม่ทำงานครับ

สอบถามเรื่อง datepicker bootrap ใส่ใน textbox ที่สามารถเพิ่มแถวได้ พอกดเพิ่มแถวแล้ว sricpt ไม่ทำงานครับ

ตามหัวรื่องเลยครับ พอดี ทำ datepicker bootrap ครับ ใส่ใน textbox ไว้ แล้วทำส่วนที่สามารำ เพิ่มแถวได้หลายๆ แถว พอกดเพิ่มแถวแล้ว datepicker ไม่ทำงาน แต่อันแรก แถวที่หนึ่งทำงานน่ะครับ ไม่ทราบว่าเป็นที่อะไรหรอครับ รบกวนช่วยชี้แนะด้วยครับ

ทำตาม กระทู้นี้แล้วไม่หายครับ link

ตามรูปแถวแรกยังทำทำงานได้อยู่



พอเพิ่มแถวสอง สคริปไม่ทำงานเลย


โค๊ดคัวเพิ่มแถว

	function CreateNewRowTime()
	{
		var intLinetime = parseInt(document.add_sch.hdlineTime.value); //alert(intLinetime);
		intLinetime++;
			
		var theTable = document.getElementById("tblTime");
		var newRow = theTable.insertRow(theTable.rows.length)
		newRow.id = newRow.uniqueID

		var newCell
		
		//*** Column 1 ***//
		newCell = newRow.insertCell(0);
		newCell.id = newCell.uniqueID;
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center>"+intLinetime+".</center>";
		
		//*** Column 2 ***//
		newCell = newRow.insertCell(1);
		newCell.id = newCell.uniqueID;
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<input name='txtdatebegin"+intLinetime+"' type='text' id='txtdatebegin"+intLinetime+"' class='timetable' />";
		
		//*** Column 3 ***//
		newCell = newRow.insertCell(2);
		newCell.id = newCell.uniqueID;
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<select name="selTime"+intLinetime+"" id="selTime"+intLinetime+"" class="form-control"></select>";
		CreateSelectTime("selTime"+intLinetime)
		document.add_sch.hdlineTime.value = intLinetime;
		

}

โค๊ดคัว datepickter 
$(document).ready(function(){
	  	  $(".timetable").datepicker({
			format: 'dd/mm/yyyy',
			autoclose: true,
			orientation: "bottom auto",
			todayHighlight: true,
			todayBtn: true,
			language: 'th',//เปลี่ยน label ต่างของ ปฏิทิน ให้เป็น ภาษาไทย (ต้องใช้ไฟล์ bootstrap-datepicker.th.min.js นี้ด้วย)
			thaiyear: true//Set เป็นปี พ.ศ.
	});

});


โค๊ด html ตัวตารางครับ

<table  id="tblTime">
    <tr>
        <td align="right">
             <input name="btnAddTime" type="button" id="btnAddTime" value="+" class="btn btn-success btn-sm" onClick="CreateNewRowTime();">
             <input name="btnDelTime" type="button" id="btnDelTime" value="-" class="btn btn-danger btn-sm" onClick="RemoveRowTime();"></td>
      </tr>
   </table>
  <input type="hidden" name="hdlineTime" id="hdlineTime" value="0" class="form-control">


 



โดย:  Nutzaaclub IP: 1.46.79.xxx วันที่: 06-11-2017 เวลา: 10:50:42

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ดูเนื้อหาตอนท้ายของบทความนี้เป็นแนวทาง

การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery http://niik.in/478 
http://www.ninenik.com/content.php?arti_id=478 via @ninenik

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
    
</head>
<body>
 
<pre id="place_show_return">
 
</pre>
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="500" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="50" align="center">ID</td>
    <td align="center">Name Thai</td>
    <td align="center">Name Eng</td>
  </tr>
  <tr class="firstTr">
    <td align="center"><input type="text" name="inputdata1[]" class="css_input_col1"></td>
    <td align="center"><input type="text" name="inputdata2[]" class="css_input_col2"></td>
    <td align="center"><input type="text" name="inputdata3[]" class="css_input_col3"></td>
  </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
    &nbsp;
    &nbsp;
    &nbsp;
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
<br>
ทดสอบโดยการเปลี่ยนค่าในช่อง ID เป็นเลข 1 - 77 หลังเปลี่ยนแปลงค่า ข้อมูลอื่นๆ ก็จถูกนำมาแสดง
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<script type="text/javascript">
$(function(){
 
    $("#addRow").click(function(){
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true) 
        .find("input").attr("value","").end()
        .appendTo($("#myTbl"));
		var lastIndex=$(".css_input_col1").size()-1; // หา index ของตัว input ล่าสุด
        $($(".css_input_col1:eq("+lastIndex+")")[0].outerHTML)
        .insertAfter($(".css_input_col1:eq("+lastIndex+")"))
        .datepicker({
			format: 'mm/dd/yyyy'
		});	
        $(".css_input_col1:eq("+lastIndex+")").remove(); // ลบตัวเดิมออก หลังจากแทนที่ตัวใหม่แล้ว		
    });
    $("#removeRow").click(function(){
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    }); 
     
	$('.css_input_col1').datepicker({
		format: 'mm/dd/yyyy'
	});	
     
});
</script>
</body>
</html>


ID Name Thai Name Eng
       


โดย:  Ninenik IP: 14.207.81.xxx วันที่: 06-11-2017