ถ้าจะใช้ การเพิ่มลบแถว jqueryกับการเลือก checkbox นำมาใส่ในคอลัม ต้องทำยังไงคะ

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

ถ้าจะใช้ การเพิ่มลบแถว jqueryกับการเลือก checkbox นำมาใส่ในคอลัม ต้องทำยังไงคะ
https://www.ninenik.com/ทำให้_เลือก_list_box_แล้วแสดง_checkbox_ด้วย_jQuery-269.html

กับลิ้งนี้

https://www.ninenik.com/เทคนิค_การเพิ่ม_ลบ_แถว_ในตาราง_รายการข้อมูล_ด้วย_jQuery_อย่างง่าย-299.html

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


Um0000um 11-03-2016 17:21:39

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

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


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


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

 ความคิดเห็นที่ 1 
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="448" border="1" cellspacing="2" cellpadding="0">
  <tr id="firstTr">
    <td width="79">
      <select name="data1[]" id="data1[]">
      <option value="1">+</option>
      <option value="2">++</option>
     </select></td>
    
     <td width="148"><input type="text" name="data2[]" id="data2[]" /></td> 
    
    <td width="407">
    <select name="my_select" id="my_select">
    <option value="">เลือกข้อมูล</option>
    </select>
    <ul class="myUL1">  

   <?php include("db_connect_edpex.php"); 
   $strSQL = "SELECT unit.unitName FROM unit";
   $objQuery = mysql_query($strSQL);

  while($result = mysql_fetch_array($objQuery)) {?>
<li>
  <input name="data1" type="checkbox" id="data1" value=" <?php $result["unitID"]; ?>" />
  <?php echo $result["unitName"];?>
</li>  
<?php } ?>
</ul></td>
    <td><textarea> </textarea> </td>
</tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
   
    <button id="removeRow" type="button">-</button>
	
    <button id="Submit" type="submit">Submit</button>    
    </td>
  </tr>
</table>
</form>

โค้ดคะ 


um0000um 11-03-2016 17:30
 ความคิดเห็นที่ 2
ลองดูตัวอย่างโค้ดนี้เป็นแนวทาง




  • data1
  • data2
  • data3
  • data4
  • data5
  • data6

       



โค้ด

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>

<body>
<style type="text/css">
select.my_select{
	position:relative;
	z-index:1000;
	width:200px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
select.my_select option{
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
ul.myUL1{   
    margin:0px;   
    padding:0px;   
    font-size:12px;   
    width:200px;   
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
    position:absolute;   
    display:none;   
    list-style:none;   
	z-index:9000;
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล  
โดยเอา comment สองบรรทัดล่างนี้ออก */      
/*  height:80px;  
    overflow:auto;*/  
}   
ul.myUL1 li{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    text-indent:5px; 
    list-style:none;   
}   
ul.myUL1 li:hover{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    background-color:#666666;   
    color:#FFFFFF;   
}
</style>


<br />
<br />
<br />

<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr class="firstTr">
    <td align="left">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td align="left">
    <select name="my_select[]" class="my_select">  
    <option value="">เลือกข้อมูล</option>  
    </select>  
    <ul class="myUL1">    
    <li>  
      <input name="data1[]" type="checkbox" value="1" />  
      data1</li>    
    <li>  
      <input name="data2[]" type="checkbox" value="2" />  
      data2</li>    
    <li>  
      <input name="data3[]" type="checkbox" value="3" />  
      data3</li>    
    <li>  
      <input name="data4[]" type="checkbox"  value="4" />  
      data4</li>    
    <li>  
      <input name="data5[]" type="checkbox"  value="5" />  
      data5</li>    
    <li>  
      <input name="data6[]" type="checkbox"  value="6" />  
      data6</li>    
    </ul>         
    </td>    
    <td align="left">
    <input type="text" class="text_data" name="data2[]"  />
    </td>

    </tr>

</table>
<br />
<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>
</form>

<pre>
<?php
// ทดสอบรับค่าที่ส่งมา ดูรูปแบบ array ข้อมูลเมื่อกดปุ่ม submit
if(count($_POST)>0){
	print_r($_POST);	
}
?>
</pre>

<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){
	
	$("#addRow").click(function(){
		// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
		// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
		// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
		$(".firstTr:eq(0)").clone(true) 
		.find("input:text").attr("value","").end()
		.find("select").attr("value","").end()
		.find("select.my_select").html("<option value=\"\">เลือกข้อมูล</option>").end()
		.find(":checkbox").prop("checked",false).end()
		.appendTo($("#myTbl"));
	});
	$("#removeRow").click(function(){
		// // ส่วนสำหรับการลบ
		if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
			$("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
		}else{
			// เหลือ 1 รายการลบไม่ได้
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});	
	

});
$(function(){  
    var obj1="select.my_select"; // กำหนด object  เป้าหมาย     
	var indexObj=0; // ค่า index ของ object เริ่มต้น ให้เป็น 0 หรือค่าแรก
    $(obj1).hover(function(){     // เมาส์เลื่อนอยู่เหนือ select
		$("ul.myUL1").trigger("mouseout"); // ซ่อนรายการตัวเลือก checkbox ที่เปิดค้างไว้
		indexObj = $(obj1).index(this);
        var nX=$(this).offset().left;     
        var nY=$(this).offset().top+($(this).height()+3);     
        $(this).html("");  
        $("ul.myUL1").eq(indexObj).show().css({     
            "width":$(this).width()+"px",  
            "left":nX,     
            "top":nY     
        });     
        $(obj1).eq(indexObj).html("<option value=\"\">เลือกข้อมูล</option>").blur();     
    });  
	$("ul.myUL1").eq(indexObj).children("li").click(function(){   
		var iCheck=($(this).children("input").prop("checked")==true)?false:true;    
		$(this).children("input").prop("checked",iCheck);  
	});     
	$("ul.myUL1").eq(indexObj).hover(function(){     
		$(this).show();      
	},function(){     
		var setValue="";  
		var setText="";  
		$("ul.myUL1").eq(indexObj).find(":checkbox").each(function(key){  
			if($(this).prop("checked")==true){  
				setValue+=$(this).val()+",";  
				setText+=$(this).parent("li").text()+",";  
			}         
		});  
		setText=(setText!="")?setText:"เลือกข้อมูล";  
		$(this).hide();     
		$(obj1).eq(indexObj).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();     
	});    		

	// คลิกพื้นที่อื่นในเพจ
	$(document).mouseup(function (e){
		var container = $("ul.myUL1"); // แต่อยู่นอกพื้นที่ที่กำหนดนี้
		if(!container.is(e.target)  && container.has(e.target).length === 0) {
			container.hide(); // ให้ซ่อนพื้นที่ที่กำหนด
		}
	});

});
</script>


</body>
</html>


ninenik 12-03-2016
 ความคิดเห็นที่ 3
แล้วถ้าตอนเซฟ+แก้ไข ต้องแก้ จากลิ้งนี้ ยังไงคะ เพราะไม่เห็นมีค่า h_item_id   https://www.ninenik.com/การเพิ่ม_ลบ_แก้ไข_ข้อมูล_กับ_รายการ_clone()_ด้วย_jquery-478.html

อีกอย่าง ถ้าคอลัมนึง เราเลือกได้หลายค่า จะเก้บค่านั้นยังไงคะ รบกวนด้วยค่ะ



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>

<body>
<style type="text/css">
select.my_select{
	position:relative;
	z-index:1000;
	width:200px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
select.my_select option{
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
ul.myUL1{   
    margin:0px;   
    padding:0px;   
    font-size:12px;   
    width:200px;   
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
    position:absolute;   
    display:none;   
    list-style:none;   
	z-index:9000;
    height:200px;  
    overflow:auto; 
}   
ul.myUL1 li{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    text-indent:5px; 
    list-style:none;   
}   
ul.myUL1 li:hover{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    background-color:#666666;   
    color:#FFFFFF;   
}
</style>


<br />
<br />
<br />

<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr class="firstTr">
    <td align="left">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">+</option>
    <option value="2">++</option>
    </select></td>
    
    <td align="left">
    <select name="my_select[]" class="my_select">  
    <option value="">เลือกข้อมูล</option>  
    </select>  
    <ul class="myUL1"> 
    <?php
$strSQL = "SELECT unit.unitName FROM unit"; 
$objQuery = mysql_query($strSQL); 
 while($result = mysql_fetch_array($objQuery)) {
?>
   <li>  
    <input name="data1[]" type="checkbox" value=" <?php $result["unitID"]; ?>" />
  <?php echo $result["unitName"];?>
    </li>    
  <?php } ?>  
         
    </ul>         
    </td>    
    <td align="left">
    <input type="text" class="text_data" name="data2[]"  />
    </td>
    
     <td align="left">
     <textarea rows="4" cols="50"  name="data3[]"> </textarea>
     </td>

    </tr>

</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    <button id="removeRow" type="button">-</button>
	<input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
</form>

<pre>
<?php
// ทดสอบรับค่าที่ส่งมา ดูรูปแบบ array ข้อมูลเมื่อกดปุ่ม submit
if(count($_POST)>0){
	print_r($_POST);	
}
?>
</pre>

<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){
	
	$("#addRow").click(function(){
		// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
		// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
		// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
		$(".firstTr:eq(0)").clone(true) 
		.find("input:text").attr("value","").end()
		.find("select").attr("value","").end()
		.find("select.my_select").html("<option value="">เลือกข้อมูล</option>").end()
		.find(":checkbox").prop("checked",false).end()
		.appendTo($("#myTbl"));
	});
	$("#removeRow").click(function(){
		// // ส่วนสำหรับการลบ
		if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
			$("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
		}else{
			// เหลือ 1 รายการลบไม่ได้
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});	
	

});
$(function(){  
    var obj1="select.my_select"; // กำหนด object  เป้าหมาย     
	var indexObj=0; // ค่า index ของ object เริ่มต้น ให้เป็น 0 หรือค่าแรก
    $(obj1).hover(function(){     // เมาส์เลื่อนอยู่เหนือ select
		$("ul.myUL1").trigger("mouseout"); // ซ่อนรายการตัวเลือก checkbox ที่เปิดค้างไว้
		indexObj = $(obj1).index(this);
        var nX=$(this).offset().left;     
        var nY=$(this).offset().top+($(this).height()+3);     
        $(this).html("");  
        $("ul.myUL1").eq(indexObj).show().css({     
            "width":$(this).width()+"px",  
            "left":nX,     
            "top":nY     
        });     
        $(obj1).eq(indexObj).html("<option value="">เลือกข้อมูล</option>").blur();     
    });  
	$("ul.myUL1").eq(indexObj).children("li").click(function(){   
		var iCheck=($(this).children("input").prop("checked")==true)?false:true;    
		$(this).children("input").prop("checked",iCheck);  
	});     
	$("ul.myUL1").eq(indexObj).hover(function(){     
		$(this).show();      
	},function(){     
		var setValue="";  
		var setText="";  
		$("ul.myUL1").eq(indexObj).find(":checkbox").each(function(key){  
			if($(this).prop("checked")==true){  
				setValue+=$(this).val()+",";  
				setText+=$(this).parent("li").text()+",";  
			}         
		});  
		setText=(setText!="")?setText:"เลือกข้อมูล";  
		$(this).hide();     
		$(obj1).eq(indexObj).html("<option value=""+setValue+"">"+setText+"</option>").blur();     
	});    		

	// คลิกพื้นที่อื่นในเพจ
	$(document).mouseup(function (e){
		var container = $("ul.myUL1"); // แต่อยู่นอกพื้นที่ที่กำหนดนี้
		if(!container.is(e.target)  && container.has(e.target).length === 0) {
			container.hide(); // ให้ซ่อนพื้นที่ที่กำหนด
		}
	});

});
</script>
</body>
</html>




um0000um 12-03-2016 22:15
 ความคิดเห็นที่ 4
ตารางดาตาเบสค่ะ อยากเก็บค่าไอดีที่เรา select หลายๆค่า ไว้ใน keyID (ในโค้ดคือดึงค่า unit มาโชว แต่จะเก็บแค่ไอดี)
 
CREATE TABLE `strength` (
  `strID` int(3) NOT NULL,
  `strLevel` enum('+','++') NOT NULL,
  `keyID` int(3) NOT NULL,
  `strItemRef` varchar(10) NOT NULL,
  `strDescription` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


um0000um 12-03-2016 22:21
 ความคิดเห็นที่ 5
ยังเก็บเข้าดาตาเบสไม่ได้เลยค่ะ ..


um0000um 13-03-2016 22:56
 ความคิดเห็นที่ 6
keyID ให้เก็บเป็น varchar 255
ให้เราเก็บ keyID เป็นข้อความติดๆ กัน ใช้ค่าจากตัวแปร 

โค้ดเพิ่มชข้อมูลก็ประมาณนี้

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>

<body>
<style type="text/css">
select.my_select{
	position:relative;
	z-index:1000;
	width:200px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
select.my_select option{
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
ul.myUL1{   
    margin:0px;   
    padding:0px;   
    font-size:12px;   
    width:200px;   
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
    position:absolute;   
    display:none;   
    list-style:none;   
	z-index:9000;
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล  
โดยเอา comment สองบรรทัดล่างนี้ออก */      
/*  height:80px;  
    overflow:auto;*/  
}   
ul.myUL1 li{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    text-indent:5px; 
    list-style:none;   
}   
ul.myUL1 li:hover{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    background-color:#666666;   
    color:#FFFFFF;   
}
</style>

<?php
/// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if($_POST['Submit']){
	
	// ตรวจสอบค่า id หลักของข้อมูล ว่ามีข้อมูลหรือไม่
	if(count($_POST['keyID'])>0){
		// แยกค่า id หลักของข้อมูลเดิม ถ้ามี เก็บเป็นตัวแปร array
		foreach($_POST['keyID'] as $key_data=>$value_data){// วนลูป จัดการกับค่า id หลัก
			@mysql_query("
				INSERT INTO strength (
					strID,
					strLevel,
					keyID,
					strItemRef,
					strDescription
				)
				VALUES (
					NULL ,
					  '".$_POST['strLevel'][$key_data]."',
					  '".$_POST['keyID'][$key_data]."',
					  '".$_POST['strItemRef'][$key_data]."',
						'".$_POST['strDescription'][$key_data]."'
				);			
			");
		}

	}
}
?>

<br />
<br />
<br />

<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr class="firstTr">
    <td align="left">
    <select name="strLevel[]" id="strLevel[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td align="left">
    <select name="keyID[]" class="my_select">  
    <option value="">เลือกข้อมูล</option>  
    </select>  
    <ul class="myUL1">    
    <?php
$strSQL = "SELECT unit.unitName FROM unit"; 
$objQuery = mysql_query($strSQL); 
 while($result = mysql_fetch_array($objQuery)) {
?>
   <li>  
    <input name="chk_keyID[]" type="checkbox" value=" <?php $result["unitID"]; ?>" />
  <?php echo $result["unitName"];?>
    </li>    
  <?php } ?>  
    </ul>         
    </td>    
    <td align="left">
    <input type="text" class="text_data" name="strItemRef[]"  />
    </td>
     <td align="left">
     <textarea rows="4" cols="50"  name="strDescription[]"> </textarea>
     </td>
    </tr>

</table>
<br />
<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>
</form>

<pre>
<?php
// ทดสอบรับค่าที่ส่งมา ดูรูปแบบ array ข้อมูลเมื่อกดปุ่ม submit
if(count($_POST)>0){
	print_r($_POST);	
}
?>
</pre>

<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){
	
	$("#addRow").click(function(){
		// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
		// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
		// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
		$(".firstTr:eq(0)").clone(true) 
		.find("input:text").attr("value","").end()
		.find("select").attr("value","").end()
		.find("select.my_select").html("<option value=\"\">เลือกข้อมูล</option>").end()
		.find(":checkbox").prop("checked",false).end()
		.appendTo($("#myTbl"));
	});
	$("#removeRow").click(function(){
		// // ส่วนสำหรับการลบ
		if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
			$("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
		}else{
			// เหลือ 1 รายการลบไม่ได้
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});	
	

});
$(function(){  
    var obj1="select.my_select"; // กำหนด object  เป้าหมาย     
	var indexObj=0; // ค่า index ของ object เริ่มต้น ให้เป็น 0 หรือค่าแรก
    $(obj1).hover(function(){     // เมาส์เลื่อนอยู่เหนือ select
		$("ul.myUL1").trigger("mouseout"); // ซ่อนรายการตัวเลือก checkbox ที่เปิดค้างไว้
		indexObj = $(obj1).index(this);
        var nX=$(this).offset().left;     
        var nY=$(this).offset().top+($(this).height()+3);     
        $(this).html("");  
        $("ul.myUL1").eq(indexObj).show().css({     
            "width":$(this).width()+"px",  
            "left":nX,     
            "top":nY     
        });     
        $(obj1).eq(indexObj).html("<option value=\"\">เลือกข้อมูล</option>").blur();     
    });  
	$("ul.myUL1").eq(indexObj).children("li").click(function(){   
		var iCheck=($(this).children("input").prop("checked")==true)?false:true;    
		$(this).children("input").prop("checked",iCheck);  
	});     
	$("ul.myUL1").eq(indexObj).hover(function(){     
		$(this).show();      
	},function(){     
		var setValue="";  
		var setText="";  
		$("ul.myUL1").eq(indexObj).find(":checkbox").each(function(key){  
			if($(this).prop("checked")==true){  
				setValue+=$(this).val()+",";  
				setText+=$(this).parent("li").text()+",";  
			}         
		});  
		setText=(setText!="")?setText:"เลือกข้อมูล";  
		$(this).hide();     
		$(obj1).eq(indexObj).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();     
	});    		

	// คลิกพื้นที่อื่นในเพจ
	$(document).mouseup(function (e){
		var container = $("ul.myUL1"); // แต่อยู่นอกพื้นที่ที่กำหนดนี้
		if(!container.is(e.target)  && container.has(e.target).length === 0) {
			container.hide(); // ให้ซ่อนพื้นที่ที่กำหนด
		}
	});

});
</script>


</body>
</html>



ส่วนการแก้ไข ให้ใช้วิธีที่ง่าย คือให้เลือกลบแต่ละรายการ แล้วเพิ่มใหม่แทน จะเป็นวิธีที่เหมาะกว่า
เพราะถ้าใช้วิธีเดิม ต้องมีความเข้าใจเกี่ยวกับ array มากกว่านี้ก่อน หรือต้องศึกษาแนงทางจากหน้านี้ให้เข้าใจ

การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery 


ninenik 14-03-2016
 ความคิดเห็นที่ 7

keyID ทำไมมันไม่เข้าคะ  เราก็ให้ value = id แล้วนิคะ 
  <ul class="myUL1">      
    <?php  
$strSQL = "SELECT unit.unitName FROM unit";   
$objQuery = mysql_query($strSQL);   
 while($result = mysql_fetch_array($objQuery)) {  
?>  
   <li>    
    <input name="chk_keyID[]" type="checkbox" value=" <?php $result["unitID"]; ?>" />  
  <?php echo $result["unitName"];?>  
    </li>      
  <?php } ?>    
    </ul> 

Array
(
    [strLevel] => Array
        (
            [0] => 1
        )

    [keyID] => Array
        (
            [0] =>  , , , , ,
        )

    [chk_keyID] => Array
        (
            [0] =>  
            [1] =>  
            [2] =>  
            [3] =>  
            [4] =>  
        )

    [strItemRef] => Array
        (
            [0] => qazqazz
        )

    [strDescription] => Array
        (
            [0] =>  qazz
        )

    [Submit] => Submit
)


um0000um 14-03-2016 23:56
 ความคิดเห็นที่ 8 
เราอาจจะใส่ผิดก็ได้ เช่นตรงนี้
<input name="chk_keyID[]" type="checkbox" value=" <?php $result["unitID"]; ?>" /> 

value=" <?php $result["unitID"]; ?>" ขาด echo ไป 
สงสัยตัวอย่างที่แนะนำอาจพิมพ์ไม่ครบ น่าจะเป็น

value="<?php echo $result["unitID"];?>"
หรือ value="<?=$result["unitID"]?>"


ninenik 15-03-2016
 ความคิดเห็นที่ 9
เวลา edit จะทำยังไงคะ ถ้าให้แก้จากในฟิลนั้นๆเลย ได้รึเปล่า


um0000um 16-03-2016 21:30
 ความคิดเห็นที่ 10 


$(function(){
	
	$("#addRow").click(function(){
		// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
		// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
		// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
		$(".firstTr:eq(0)").clone(true) 
		.find("input:text").attr("value","").end()
		.find("select").attr("value","").end()
		.find("select.my_select").html("<option value="">เลือกข้อมูล</option>").end()
		.find(":checkbox").prop("checked",false).end()
		
		.appendTo($("#myTbl"));
	});

ทำไมมันยังไม่เคลียฟิลสุดท้ายให้คะ


um0000um 16-03-2016 22:15
1 2 Next







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ