PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เงื่อนไขการ show/hide textbox มาให้กรอกข้อมูล ในการ clone หลายแถว

เงื่อนไขการ show/hide textbox มาให้กรอกข้อมูล ในการ clone หลายแถว

ตามรูปนะคะ คือ เวลาเลือก select ประเภท = เช่า จะขึ้น textbox ระยะเวลาการเช่า มาให้กรอกข้อมูล
แต่พอกดปุ่ม บวก เพื่อจะเพิ่มสินค้าอีกตัว ยังไม่ทันเลือกประเภท มันก็ clone ตัว textbox มาด้วยค่ะ

codeการ clone
<script language="JavaScript">
$(document).ready(function(){
    $("#addRow").click(function(){
        var html = $(".tramount:last").html();
        var last_id = parseInt($(".tramount:last").attr("id").split("_")[1]);
        var new_id = last_id+1;
        var newRow = '<tr class="tramount" id="tramount_'+new_id+'">'; 
        newRow += html.replace(new RegExp("_"+last_id,"g"), "_"+new_id);
        newRow += "</tr>";
        $("#tblamount tbody").append(newRow);
    });
    $("#removeRow").click(function(){
        if($(".tramount").length > 1) $(".tramount:last").remove()
    });
    $('input[name="cost[]"], input[name="amount[]"]').change(function(){
        var total = 0.0;
        $(".tramount").each(function(){
            var now_id = parseInt($(this).attr("id").split("_")[1]);
            var cnt = parseInt($("#amount_"+now_id).val());
            var price = parseFloat($("#cost_"+now_id).val());
            var row = (cnt*price);
            if(row!= NaN && row>0) total += row;            
        });
        $("#sum").val(total);        
    });
});
</script>
code การ show/hide textbox 
<script language="javascript">
$(document).ready(function() {
	$('#rentPrice').hide(); //hide field on start
 
	$('#type_1').change(function() {
 
	 var $index = $('#type_1').index(this);
 
	 if($('#type_1').val() == 'เช่า') { //if this value is NOT selected
	 $('#rentPrice').show(); //this field is hidden
	 } 
	 else {
	 $('#rentPrice').hide();//else it is shown
 
	 }
        });
 });
</script>
อยากรู้ว่าจะทำยังไง ให้ไม่ clone มาทั้งหมดค่ะ ให้โชว์ textbox เฉพาะตอนเลือก select ประเภท = เช่า เท่านั้น

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 25-08-2014 เวลา: 14:06:32

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

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


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


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

โดย:  Bsaranya IP: 223.204.255.xxx วันที่: 13-07-2015 เวลา: 11:03:33
 ความคิดเห็นที่ 17
คลุมข้อมความด้วย div แล้วกำหนด class .ให้เช่น

<div class="show_file_name">Filename </div>     


ส่วนการจัดการในโค้ด clone ก็กำหนดเพิ่มประมาณนี้ เช่น

$(".firstTr:eq(0)").clone(true)   
.find("input").attr("value","").end()  
.find("textarea").attr("value","").end()  
.find(".show_file_name").text("").end()
.find("select").attr("value","").end()  
.appendTo($("#myTbl"));    


โดย:  Ninenik IP: 1.46.231.xxx วันที่: 10-07-2015
 ความคิดเห็นที่ 16
เรื่อง clone 
สำหรับการ upload file 
ถ้าใส่โค้ด <input type="file" name="fileUpload[]" value="<? echo $rs['file'];?>"/> ค่าจะไม่ขึ้นตามรูป


ถ้าใส่โค้ด <input type="file" name="fileUpload[]" /><? echo $rs['file'];?> ค่าจะขึ้นตามรูป


จะทำยังไงให้เห็นชื่อไฟล์ และสามารถ เพิ่มการ clone แถวโดยที่ ไม่ขึ้นชื่อไฟล์ก่อนๆคะ 
ตย. กด+ เพื่อเพิ่ม แต่มีชื่อไฟล์แรกติดมาด้วย 


ในโค้ดส่วน script นี้ต้องแก้ว่ายังไงคะ

$(".firstTr:eq(0)").clone(true) 
.find("input").attr("value","").end()
.find("textarea").attr("value","").end()
.find("select").attr("value","").end()
.appendTo($("#myTbl"));














โดย:  Bsaranya IP: 223.204.255.xxx วันที่: 10-07-2015 เวลา: 16:30:50
 ความคิดเห็นที่ 15
radio ติดชื่อเหมือนกันเลยไม่ได้ ต้องประยุกต์ เปลี่ยนชื่อ radio แต่ละชุด  อย่างแรกให้ กำหนด css ให้แต่ละชุด เอาไว้อ้างอิง ด้วย class

 <td>  
<input type="radio" class="css_radio1" name="status[]"  value="new">new<br/>  
<input type="radio" class="css_radio1" name="status[]"  value="used">used  
</td>  
<td>  
<input type="radio" class="css_radio2" name="updates[]"  value="0">out of Stock<br/>  
<input type="radio" class="css_radio2" name="updates[]"  value="1">สินค้าว่าง<br/>  
<input type="radio" class="css_radio2" name="updates[]"  value="2">งานเช่า  
</td>  

แล้วก็ใช้ ตัวแปร กำหนดลำดับ สำหรับเปลี่ยนชื่อ  ถ้าเพิ่มแถวก็ + ค่า ลดแถว ก็ลดค่า
ค่าที่ได้ หรือชื่อใหม่แต่ละแถว ก็จะเป็น status[] status1[] status2[.....

ลองไล่ดูโค้ดด้านล่าง แล้วดึงที่ใช้ไปประยุกต์]



    var indexObj=0;
    $("#addRow").on("click",function(){  
        indexObj++;
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .find(":radio.css_radio1").prop("checked",false).attr("name","status"+indexObj+"[]").end()  //  
        .find(":radio.css_radio2").prop("checked",false).attr("name","updates"+indexObj+"[]").end()  //  
        .appendTo($(".place-datarow"));     
          
    }); 
    
    $("#removeRow").on("click",function(){   
        indexObj--;




โดย:  Ninenik IP: 124.122.182.xxx วันที่: 16-09-2014
 ความคิดเห็นที่ 14
ใช่ค่ะ ก็ทำเป็น  TR แต่ตอนเรียกมาใช้ มันเป็นแบบรูปค่ะ



คือ ถ้าเพิ่มอีกแถวนึง ที่เลือก radio button ไว้ในแถวแรก จะมาอยู่ที่แถว2 แทน  อย่างในรูป สภาพที่เห็นจะเป็น new/used/new/used ซึ่งสามารถเลือกได้แค่อันเดียวค่ะ 

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 16-09-2014 เวลา: 15:32:03
 ความคิดเห็นที่ 13
การ clone เป้นการเลือก ทั้งแถว ถ้าจะให้ clone อะไร ก็เอาส่วนนั้นไปไว้ใน tr ที่ต้องการ clone

ส่วนกำหนดให้ล้างค่าเมื่อ clone แล้ว

            $(".datarow:eq(0)").clone(true)  
        .find("input").attr("value", "").end()  
        .find("select").attr("value", "").end() //       
        .find(":radio").prop("checked",false).end() //       
    .appendTo($(".place-datarow"));  
  



โดย:  Ninenik IP: 124.122.182.xxx วันที่: 16-09-2014
 ความคิดเห็นที่ 12
ถ้าต้องการ clone ข้อมูลที่เป็น <input type="radio"/>
 เช่น 
 <td>
<input type="radio" name="status[]"  value="new">new<br/>
<input type="radio" name="status[]"  value="used">used
</td>
<td>
<input type="radio" name="updates[]"  value="0">out of Stock<br/>
<input type="radio" name="updates[]"  value="1">สินค้าว่าง<br/>
<input type="radio" name="updates[]"  value="2">งานเช่า
</td>

ถ้าต้องการใส่ข้อมูลตรงนี้ต้องใส่ว่าไงค่ะ
<script type="text/javascript">
$(function () {

    
    
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
            $(".datarow:eq(0)").clone(true)
        .find("input").attr("value", "").end()
        .find("select").attr("value", "").end() //     
    .appendTo($(".place-datarow"));

	
    $("#removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});
});
</script>     



โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 16-09-2014 เวลา: 11:53:02
 ความคิดเห็นที่ 11
ขอบคุณมากๆเลยค่ะ ที่ช่วยเหลือ smileysmiley

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 29-08-2014 เวลา: 16:39:47
 ความคิดเห็นที่ 10
ใน html ให้เพิ่ม s เข้าไปในรายการอีกอันที่เพิ่มเข้ามาทั้ง class และ id  (css_datetime_pickers  และ  id_datetime_pickers0 )
เช่น

<input type="text" class="form-control css_datetime_pickers" name="date2_product[]" value="" id="id_datetime_pickers0" >  

ใน javascript ให้ทำคล้ายส่วนเดิม แต่เพิ่มอีกชุดที่เป็นตัวเติม s

ส่วนตอนโหลดตอนแรก 

$("#id_datetime_picker0").datetimepicker();   
$("#id_datetime_pickers0").datetimepicker();   


ส่วนที่เพิ่มแถว

    $(".datarow:eq(0)").clone(true)
        .find("input").attr("value", "").end()
        .find("select").attr("value", "").end() //     
    .appendTo($(".place-datarow"));
    var lastIndex = $(".css_datetime_picker").size() - 1; // หา index ของตัว input ล่าสุด    
    var newId = "id_datetime_picker" + lastIndex;
    var newIds = "id_datetime_pickers" + lastIndex;
    var objID = "#" + newId;
    var objIDs = "#" + newIds;
    var placeParent = $(".css_datetime_picker:eq(" + lastIndex + ")").parents("td");
    var placeParents = $(".css_datetime_pickers:eq(" + lastIndex + ")").parents("td");
    // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย  
    $(placeParent).html("<input type=\"text\" class=\"form-control css_datetime_picker\" name=\"date_product[]\" >");
    $(placeParents).html("<input type=\"text\" class=\"form-control css_datetime_pickers\" name=\"date2_product[]\" >");
    $(".css_datetime_picker:eq(" + lastIndex + ")")
        .attr("id", newId) // - กำหนด id เป็นค่าใหม่  
    .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone    
    $(".css_datetime_pickers:eq(" + lastIndex + ")")
        .attr("id", newIds) // - กำหนด id เป็นค่าใหม่  
    .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone    
    $(objID).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง
    $(objIDs).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง





โดย:  Ninenik IP: 124.120.62.xxx วันที่: 29-08-2014
 ความคิดเห็นที่ 9

ถ้าตามโค้ด จะเลือก datetimepicker  ได้เฉพาะ วันที่หมดสัญญา ใช่ไม๊ค่ะ
แล้วถ้าจะให้เลือก datetimepicker ได้กับ วันที่ซื้อ/เช่า ด้วยอ่ะค่ะ 
ต้องเปลี่ยนแปลงโค้ดตรงไหนค่ะ

$(function () {
    
    $("#id_datetime_picker0").datetimepicker(); 

$("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .appendTo($(".place-datarow"));     
        var lastIndex=$(".css_datetime_picker").size()-1; // หา index ของตัว input ล่าสุด  
        var newId="id_datetime_picker"+lastIndex;
        var objID="#"+newId;
        var placeParent=$(".css_datetime_picker:eq("+lastIndex+")").parents("td");    
        // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย
         $(placeParent).html("<input type="text" class="form-control css_datetime_picker" name="date_product[]" >");     
        $(".css_datetime_picker:eq("+lastIndex+")")
        .attr("id", newId) // - กำหนด id เป็นค่าใหม่
        .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone        
        $(objID).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง          
          
    }); 

เพราะหนูลองเพิ่มโค้ดแล้ว แต่มันไม่ได้ เลยสงสัยว่าต้องเปลี่ยนค่าตรง .size()-1;  หรือเปล่าค่ะ

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 29-08-2014 เวลา: 13:42:00
 ความคิดเห็นที่ 8
นึกภาพไม่ออก

โดย:  Ninenik IP: 110.168.68.xxx วันที่: 29-08-2014
 ความคิดเห็นที่ 7
แล้วถ้า เพิ่มแถววันที่ อีกอัน

..size()-1;  ต้องเปลี่ยนเป็นอะไรค่ะ หนูลองเปลี่ยน -2,-3,-4,-0 ก็แล้ว ก็ไม่ได้อ่ะค่ะ

var lastIndex2=$(".css_datetime_picker").size()-1; // หา index ของตัว input ล่าสุด  
        var newId2="id_datetime_picker"+lastIndex2;
        var objID2="#"+newId2;
        var placeParent2=$(".css_datetime_picker:eq("+lastIndex2+")").parents("td");   
 // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย
 $(placeParent2).html("<input type="text" class="form-control css_datetime_picker" name="date_product2[]" >");     
        $(".css_datetime_picker:eq("+lastIndex2+")")
        .attr("id", newId2) // - กำหนด id เป็นค่าใหม่
        .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone        
        $(objID2).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง		


โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 29-08-2014 เวลา: 10:41:45
 ความคิดเห็นที่ 6
ขอบคุณมากค่ะ  smileysmiley

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 29-08-2014 เวลา: 09:25:05
 ความคิดเห็นที่ 5
โค้ดตัวอย่าง จะใช้ กับ jquery ui datepicker โค้ดจึงไม่เหมือนกัน 

ส่วนตัว datetimepicker ที่เนะนำมา สวยงามมาก เรียบง่าย น่าใช้ทีเดียว

ดูการประยุกต์จากบทความนี้

แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก  
http://www.ninenik.com/content.php?arti_id=540 via @ninenik


โดย:  Ninenik IP: 1.46.209.xxx วันที่: 29-08-2014
 ความคิดเห็นที่ 4
แล้วถ้าเป็นการ clone ข้อมูลแบบธรรมดา 

ถ้าต้องการ จะ add row ข้อมูลที่เป็น datetimepicker ซึ่งโค้ดมาจาก http://xdsoft.net/jqplugins/datetimepicker/

<td align="center">
		<input name="buyDate[]" type="text" id="datetimepicker" class="form-control" /></td>
<td align="center">
		<input name="contractDate[]" type="text" id="datetimepicker2" class="form-control" /></td>

แล้วจะ  addRow 
ยังไงค่ะ 

  $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .appendTo($(".place-datarow"));     
          
    }); 

ดูจากที่อื่นมีแต่ datepicker ไม่มีที่เป็น datetimepicker 
เช่น http://jsfiddle.net/chiragraninga/MMmyU/
.removeClass('hasDatepicker');  ตรงนี้ก็ไม่เข้าใจว่ามาจากไหนอ่ะค่ะ 

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 28-08-2014 เวลา: 16:42:41
 ความคิดเห็นที่ 3
คงแนะนำไม่ได้ ต้องดูการทำงานรวม
แต่ดูจากวิธีการเขียนโค้ด เหมือนจะเขียนยากไป
การเพิ่มแถว ถ้าใช้การ clone ก็จะอ้างอิงกับ html ด้วย
แต่การ clone แบบใช้ตัวแปร ก็คงเป็นปํญหาอีกแบบหนึ่ง

โดย:  Ninenik IP: 58.11.234.xxx วันที่: 26-08-2014
 ความคิดเห็นที่ 2
ตอนนี้หนูใช้โค้ด clone เป็นแบบ autocomplete ด้วย

$(document).ready(function(){
	$(".css_i_select").on("change",function(){  
        var i_select=$(this).val();
         if(i_select=="เช่า"){
            $(this).parents("tr").find(".css_more").show();   
         }else{
             $(this).parents("tr").find(".css_more").hide();   
         }
    });
    // Use the .autocomplete() method to compile the list based on input from user
    $('#brand').autocomplete({
        source: 'autocomplete/autoProducts/data/item-data.php',
        minLength: 1,
        select: function(event, ui) {
            var $itemrow = $(this).closest('tr');
                    // Populate the input fields from the returned values
					$itemrow.find('#codeST').val(ui.item.codeST);
                    $itemrow.find('#brand').val(ui.item.brand);
					$itemrow.find('#type').val(ui.item.type);
                 		       $itemrow.find('#unit').val(ui.item.unit);

                    // Give focus to the next input field to recieve input from user
					$('#typeQT').focus();
                    $('#detail').focus();
					$('#price').focus();
					$('#quantity').focus();
					$('#discount').focus();
					

            return false;
	    }
    // Format the list menu output of the autocomplete
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.brand + " - " + item.codeST + "</a>" )
            .appendTo( ul );
    };

    // Get the table object to use for adding a row at the end of the table
    var $itemsTable = $('#itemsTable');

    // Create an Array to for the table row. ** Just to make things a bit easier to read.
    var rowTemp = [
        '<tr class="item-row">',
            '<td><a id="deleteRow"><img src="autocomplete/autoProducts/images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
			'<td><select name="typeQT[]" id="typeQT" class="form-control" tabindex="1"><option value="">เลือกประเภท</option><option value="ขาย">ขาย</option><option value="เช่า">เช่า</option><option value="ค่าบริการ">ค่าบริการ</option></select></td>',
            '<td><input name="codeST[]" type="hidden" class="form-control" id="codeST"/><input name="brand[]" value="" class="form-control" id="brand" tabindex="2"/></td>',
			'<td><input name="type[]" value="" class="form-control" id="type" tabindex="3" /></td>',
			
			'<td><input name="unit[]" value="" class="form-control" id="unit" tabindex="12"/></td>',
			'<td><input name="price[]" value="" class="form-control" id="price" tabindex="13" OnKeyPress="return chkNumber(this);"/></td>',
			'<td><input name="discount[]" value="" class="form-control" id="discount" tabindex="14" OnKeyPress="return chkNumber(this);"/></td>',
									  
        '</tr>'
    ].join('');

    // Add row to list and allow user to use autocomplete to find items.
	
	
    $("#addRow").bind('click',function(){

        var $row = $(rowTemp);

        // save reference to inputs within row
		var $codeST 	        = $row.find('#codeST');
        var $brand 	        = $row.find('#brand');
		var $type 	        = $row.find('#type');
        	var $typeQT 	    = $row.find('#typeQT');
		var $unit 	        = $row.find('#unit');
             var $price	        = $row.find('#price');
        var $quantity	    = $row.find('#quantity');
		var $discount 	    = $row.find('#discount');

        if ( $('#brand:last').val() !== '' ) {

            // apply autocomplete widget to newly created row
            $row.find('#brand').autocomplete({
                source: 'autocomplete/autoProducts/data/item-data.php',
                minLength: 1,
                select: function(event, ui) {
					$codeST.val(ui.item.codeST);
                    $brand.val(ui.item.brand);
					$type.val(ui.item.type);
                    $transmission.val(ui.item.transmission);
					$unit.val(ui.item.unit);
					

                    // Give focus to the next input field to recieve input from user
                     $typeQT.focus();
					 $detail.focus();
					 $price.focus();
					 $quantity.focus();
					 $discount.focus();

                    return false;
                }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.brand + " - " + item.codeST + "</a>" )
                    .appendTo( ul );
            };
            // Add row after the first row in table
            $('.item-row:last', $itemsTable).after($row);
            $($brand).focus();

        } // End if last brand input is empty
        return false;
    });

    $('#brand').focus(function(){
        window.onbeforeunload = function(){ return "ทำรายการใบเสนอราคา"; };
    });

}); // End DOM


	// Remove row when clicked
	$("#deleteRow").live('click',function(){
		$(this).parents('.item-row').remove();
        // Hide delete Icon if we only have one row in the list.
        if ($(".item-row").length < 2) $("#deleteRow").hide();
	});
	

ถ้าใส่แบบนี้ จะขึ้น textbox เวลาเลือก select "เช่า"  แต่ไม่สามารถกด  + เพิ่มข้อมูลได้  ไม่ทราบว่าต้องแก้ตรงไหนค่ะ



โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 26-08-2014 เวลา: 14:04:12
 ความคิดเห็นที่ 1
ให้ใส่ css class ไปใน ตัว input ตัวที่จะให้ซ่อนหรือแสดงตามเงื่อนไข
แล้ว ส่งให้ย้อนไป ที่แถว แล้วไปหา css ตัวนั้น :ซ่อนตามเงื่อนไข

เช่น 

         if(i_select=="A"){
            $(this).parents("tr").find(".css_more").show();   
         }else{
             $(this).parents("tr").find(".css_more").hide();   
         }


เท่าที่ดูตามโค้ด ยังใช้ id กับ class ไม่ค่อยถูกเท่าไหร่ พยายามใช้ css class แทน id
รหือ .css มากกว่า #id เวลาใช้กับ jquery

ลองดูโค้ดตัวอย่างนี้ เอาไปประยุกต์เพิ่มเติมได้


ประเภท ยี่ห้อ ชื่อสินค้า



ไฟล์ index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
    .css_more{
        display: none;
    }
    </style>
</head>
<body>
   
    <br>
    <div style="margin:auto;width:90%;">
    <form role="form" method="post" action="show.php">
      <table class="table table-striped">
          <tr class="active">
              <th class="text-center">ประเภท</th>
              <th class="text-center">ยี่ห้อ</th>
              <th class="text-center">ชื่อสินค้า</th>
              <th width="130" class="text-center"></th>
          </tr>
          <tbody class="place-datarow">
              <tr class="datarow" >
                  <td>
                    <select name="type_product[]" class="form-control css_i_select">
                        <option value="">Select Type</option>
                        <option value="A">Type A</option>
                        <option value="B">Type B</option>
                    </select>  
                      
                  </td>
                  <td>
                    <select name="brand_product[]" class="form-control">
                        <option value="">Select Brand</option>
                        <option value="AAA">Brand AAA</option>
                        <option value="BBB">Brand BBB</option>
                    </select>                  
                  </td>
                  <td>
                  <input type="text" class="form-control" name="name_product[]" >
                  </td>
                  <td>
<input type="text" class="form-control css_more" name="more_data[]">                  
                  </td>
              </tr>
          </tbody>
      </table>
      <br>
      <table class="table">
          <tr>
              <td width="50" class="tex-center">
               <button id="addRow" type="button" class="btn btn-info">+</button>      
              </td>
              <td width="50" class="tex-center">
               <button id="removeRow" type="button" class="btn btn-danger">-</button>      
              </td>
              <td class="text-right">
               <button type="submit" class="btn btn-success">Submit</button>
                  
              </td>
          </tr>
      </table>
      </form>
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript" src="script.js"></script>         
</body>
</html>


ไฟล์ script.js

$(function () {
    
     $(".css_i_select").on("change",function(){  
        var i_select=$(this).val();
         if(i_select=="A"){
            $(this).parents("tr").find(".css_more").show();   
         }else{
             $(this).parents("tr").find(".css_more").hide();   
         }
    });
    
    
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .appendTo($(".place-datarow"));     
          
    }); 
    
    $("#removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});


ไฟล์ show.php ทดสอบ

<pre>
    <?php print_r($_POST); ?>
    
</pre>


โดย:  Ninenik IP: 110.168.67.xxx วันที่: 25-08-2014