เพิ่มแถวตารางได้ แต่เลือกข้อมูลการทำงานได้แค่ชุดแถวแรกค่ะ

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

เพิ่มแถวตารางได้ แต่เลือกข้อมูลการทำงานได้แค่ชุดแถวแรกค่ะ

<script language="javascript" src="js/jquery-1.4.1.min.js">//เพิ่มแถวข้อมูล</script>
<script type="text/javascript">
$(function(){
    $("#addRow").click(function(){
        $("#myTbl").append($("#firstTr").clone());//append เพิ่มอิลิเมนต์ไว้ด้านล่าง // clone ใช้คัดลอกรูปแบบข้อมูลที่ต้องการ
    });
    $("#removeRow").click(function(){
        if($("#myTbl tr").size()>1){
            $("#myTbl tr:last").remove();
        }else{
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });         
});
</script>
<table id="myTbl" border="1" align="center" cellpadding="0" cellspacing="1">
  <tr id="firstTr">
       <td height="28" bgcolor="#FFFFFF" align="left">&nbsp;<?php if(isset($sup_name))echo $round;else echo null; ?></td> 
        <td height="28" bgcolor="#FFFFFF" align="left">
		<span class="txthmsg"></span>
	    <span class="frmSearch">
	    <input type="text" id="search-box" placeholder="Supplier Name" name="search_sup[]" 
	value="<?php if(isset($sup_name)) echo $rs['sup_name']; else echo null;?>"/>
		</span>  
  <div class="frmSearch">
    <div id="suggesstion-box"></div></div></td>
		<td height="28" width="100px" bgcolor="#FFFFFF" align="left">&nbsp;<?php if(isset($sup_name))echo $rs['sup_distance']." กม. "; else "- กม."; ?>
		<input type="text" name="kg_new[]" size="1px"></td>
       <td height="20" bgcolor="#FFFFFF"><p>
	   <label><input type="radio" name="Radio_day[]" value="1" id="Radio_day[]">วันหยุด</label><br>
		<label><input name="Radio_day[]" type="radio" id="Radio_day[]" value="2" checked="CHECKED"> วันปกติ</label><br></p></td>
        <td height="20" bgcolor="#FFFFFF"><p>
            <label><input type="radio" name="Radio_degree[]" value="1" id="Radio_degree[]"> ด่วน</label>  
			จำนวน ชม. <input name="time[]" type="text" size="3"><br>
			<label><input name="Radio_degree[]" type="radio" id="Radio_degree[]" value="2" checked="CHECKED">ไม่ด่วน</label>
            <br></p></td>
          <td height="25" bgcolor="#FFFFFF"><p>
            <label><input type="radio" name="Radio_time[]" value="1" id="Radio_time_0">ก่อน 8.00 น.</label>
            <br><label><input name="Radio_time[]" type="radio" id="Radio_time_1" value="2" checked="CHECKED">เวลาปกติ</label>
            <br><label><input type="radio" name="Radio_time[]" value="3" id="Radio_time_2">หลัง 17.00 น.</label><br></p>
			<span class="style4"></span></td>
          <td height="25" bgcolor="#FFFFFF">
		  <button id="addRow" type="button">+</button>
		  <button id="removeRow" type="button">-</button></td>
		   
     </tr></table>
	 <input name="submit" type="submit" id="submit" action="trans_save.php" value="บันทึกข้อมูลทั้งหมด" style="text-align:right" >
</form>

Violet Rose 07-06-2018 13:43:44

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ใน jquery หรือ css selector การอ้างอิงเวลาใช้ id ด้วย # ค่าจะต้องไม่ซ้ำกัน

ปกติ เราควรเอาปุ่ม เพิ่ม กับ ลบ ออกจากแถวที่ทำการ clone() แต่ถ้าต้องการให้มีปุ่ม

เพิ่ม และลบ อยู่ในแถวที่ทำการ clone เราต้องเปลี่ยนมาใช้เป็น class ซึ่งสามารถซ้ำกันได้

จาก id ให้เปลี่ยนเป็น class แทน และเปลี่ยนการอ้างอิงจาก (#) เป็น (.)
รายการใน แถว ยกเลิกการกำหนด id ให้กับ element และกำหนด name ของ element ใน
แถวที่จะทำการ clone มี ken เป็น 0 ทุกต้ัว เช่น name="search_sup[0]" หรือ name="Radio_day[0]"

และหากต้องการให้สามารถลบแถวใดๆ ได้ โดยไม่ใช่ลบเฉพาะแถวสุดท้าย สามารถดูตัวอย่างนี้เป็นแนวทาง

วันหยุด
วันปกติ

ด่วน จำนวน ชม.
ไม่ด่วน

ก่อน 8.00 น.
เวลาปกติ
หลัง 17.00 น.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
<table id="myTbl" border="1" align="center" cellpadding="0" cellspacing="1">
  <tr class="firstTr">
    <td height="28" bgcolor="#FFFFFF" align="left">&nbsp;</td>
    <td height="28" bgcolor="#FFFFFF" align="left"><span class="txthmsg"></span> <span class="frmSearch">
      <input type="text" id="search-box" placeholder="Supplier Name" name="search_sup[0]"
    value=""/>
      </span>
      <div class="frmSearch">
        <div id="suggesstion-box"></div>
      </div></td>
    <td height="28" width="100px" bgcolor="#FFFFFF" align="left">&nbsp;
      <input type="text" name="kg_new[0]" size="1px"></td>
    <td height="20" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_day[0]" value="1" >
          วันหยุด</label>
        <br>
        <label>
          <input name="Radio_day[0]" type="radio"  value="2" checked="CHECKED">
          วันปกติ</label>
        <br>
      </p></td>
    <td height="20" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_degree[0]" value="1" >
          ด่วน</label>
        จำนวน ชม.
        <input name="time[]" type="text" size="3">
        <br>
        <label>
          <input name="Radio_degree[0]" type="radio" value="2" checked="CHECKED">
          ไม่ด่วน</label>
        <br>
      </p></td>
    <td height="25" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_time[0]" value="1" >
          ก่อน 8.00 น.</label>
        <br>
        <label>
          <input name="Radio_time[0]" type="radio"  value="2" checked="CHECKED">
          เวลาปกติ</label>
        <br>
        <label>
          <input type="radio" name="Radio_time[0]" value="3" id="Radio_time_2">
          หลัง 17.00 น.</label>
        <br>
      </p>
      <span class="style4"></span></td>
    <td height="25" bgcolor="#FFFFFF"><button class="addRow" type="button">+</button>
      <button class="removeRow" type="button">-</button></td>
  </tr>
</table>
<input name="submit" type="submit" id="submit" action="trans_save.php" value="บันทึกข้อมูลทั้งหมด" style="text-align:right" >
</form>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> 
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script> 
<script type="text/javascript">
$(function(){

	var num_clone = 0; // กำหนดค่า key สำหรับนับเพิ่ม กรณี้ใช้กับ checkbox ลแะ radio แบบ array
    $(".addRow").on("click",function(){
		num_clone++;
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
		.find("input").val("").end() // ล้างค่า input
		.find("select").val("").end() // ล้างค่า select
		.find(":radio").prop("checked",false).end() // ล้างค่า radio
		.find(":checkbox").prop("checked",false).end() // ล้างค่า checkbox
		.find("select").val("").end() // ล้างค่า select element
		.find("[name^='search_sup']").attr("name","search_sup["+num_clone+"]").end()
		.find("[name^='kg_new']").attr("name","kg_new["+num_clone+"]").end()
		.find("[name^='Radio_day']").attr("name","Radio_day["+num_clone+"]").end()
		// วนทำค่าอื่นๆ ให้ครบ ตามต้องการ .find("[name^='ชื่อ]").attr("name","ชื่อ["+num_clone+"]").end()
		.appendTo($("#myTbl"));
    });
	
    $(".removeRow").on("click",function(){
		var indexThis = $(".removeRow").index($(this)); // หา key รายการที่จะลบ
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").length>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:eq("+indexThis+")").remove(); // ลบรายการของแถวที่จะลบ
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });   
  
});
</script>
</body>
</html>

อย่างไรก็ตาม การเลือกที่จะลบรายการในแถวใดๆ ก็ได้ จะมีผลกับลำดับของข้อมูล ซึ่งถ้าใช้ในการแก้ไข

ข้อมูล แนะนำให้ทำการลบค่าเก่า แล้วทำการ Insert ค่าใหม่แทนการ Update

ดูการประยุกต์การใช้ class แทน id ในบทความนี้

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

https://www.ninenik.com/content.php?arti_id=478 via @ninenik

ninenik 07-06-2018

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

ขอบคุณมากนะคะ อธิบายเข้าใจง่าย ละเอียด ชัดเจน ปกติเรียนใช้แต่ php ต้องศึกษาภาษาอื่นๆอีกเยอะเลย
แล้วบางทีหาข้อมูลแล้วเราอ่านคำอธิบายไม่ค่อยเข้าใจ(ไม่เก่งภาษา555) ขอบคุณค่ะ

Violet Rose 07-06-2018 16:35

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