สอบถามเรื่อง 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 1.46.79.xxx 06-11-2017 10:50:42

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ดูเนื้อหาตอนท้ายของบทความนี้เป็นแนวทาง

การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery http://niik.in/478

https://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 14.207.81.xxx 06-11-2017

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน