動態添加行到表中不工作使用jquery

我想添加到表中，但我點擊添加按鈕2行添加simulataneously我的意思是循環運行兩次。但刪除行沒有問題。動態添加行到表中不工作使用jquery

$(document).ready(function() { 
    $(".add_partners_details").click(function() { 
    var newrow = $('<div class="t-row"><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]" value="" placeholder=""/></div><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder=""/></div><div class="t-col end"><input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder=""/></div><div class="t-col border_none"><a href="javascript:void(0);" class="remove_partners_details">Remove</a></div></div>'); 
     $("#details_of_partners_directors").append(newrow); 
    }); 

    $("#details_of_partners_directors").on('click','.remove_partners_details',function() { 
     $(this).parent().parent().remove(); 
    }); 
});

HTML

<div class="t-row"> 
    <div class="t-col"> 
     <input type="text" class="text_field txtNumeric"name="partners_or_directors_sl_no_id[]" value="" placeholder=""/> 
    </div> 
    <div class="t-col"> 
     <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder=""/> 
    </div> 
    <div class="t-col end"> 
     <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder=""/> 
    </div> 
    <div class="t-col border_none"> 
     <a href="javascript:void(0);" class="add_partners_details">Add</a> 
    </div> 
</div>

來源

2013-09-25 Supriya

沒有與id的元素'這個小提琴details_of_partners_directors' –

可能的複製... HTTP：//jsfiddle.net/samliew/3AJcj/2/如果不張貼的我們的代碼小提琴.. – codebreaker

請參閱http：/ /jsfiddle.net/arunpjohny/9ta6D/1/ –

我懷疑這是發生，因爲你使用的是類選擇，這是造成點擊觸發事件，對於具有該類每個元素。嘗試使用唯一的類名稱或ID。

來源

2013-09-25 09:28:01 simonlchilds

「details_of_partners_directors」是表名。 – Supriya

姓名不是身份證我知道..但爲了我們的身份證明，我們給了像「name_id」。 – Supriya

）我看到的，因爲你正在使用的效果（你需要包括了jQuery UI庫的唯一問題也

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/redmond/jquery-ui.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.js"></script>

演示：Plunker

來源

2013-09-25 09:31:36

設置jsfiddle相同。 –

@JitendraPancholi已完成評論 –

這可能有助於@Supriya –

我已經做了一些工作，請

的Jquery：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".add_partners_details").click(function() { 
      var curindex = parseInt($("#hdn").val(), 10); 
      if (curindex == 0) { 
       curindex = 1; 
      } 
      else { 
       curindex = curindex + 1; 
      } 

      var newDiv = '<div class="t-row" id= parentDiv' + curindex + '>' + 
    '<div class="t-col">' + 
       '<input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]"' + 
      'value="" placeholder="" /></div>' + 
    '<div class="t-col">' + 
     '<input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder="" /></div>' + 
    '<div class="t-col end" id="last">' + 
     '<input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder="" /></div>' + 
    '<div class="t-col border_none">' + 
     '<a href="javascript:void(0);" class="add_partners_details">Add</a>' + 
     '<a href="javascript:void(0);" class="Remove_partners_details">Remove</a>' + 
    '</div>' + 
'</div>'; 
      var prediv = $('#hdnParent').val(); 
      $("#" + prediv).after(newDiv); 
      $("#hdn").val(curindex); 
      $('#hdnParent').val('parentDiv' + curindex); 

     }); 

     $(".Remove_partners_details").click(function() { 

      var curindex = parseInt($("#hdn").val(), 10); 
      if (curindex != 0) 
       $("#" + $('#hdnParent').val()).remove(); 
      if (curindex >= 1) { 
       $("#" + curindex).remove(); 
       if (curindex == 1) { 
        curindex = 0; 
       } 
       else { 
        curindex = curindex - 1; 
       } 
       if (curindex == 0) { 
        $('#hdnParent').val('parentDiv'); 

       } 
       else { 
        $('#hdnParent').val('parentDiv' + curindex); 

       } 
       $("#hdn").val(curindex); 
      } 

     }); 

    }); 
</script>

ASPX：

<div class="t-row" id="parentDiv"> 
    <div class="t-col"> 
     <input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]" 
      value="" placeholder="" /></div> 
    <div class="t-col"> 
     <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" 
      value="" placeholder="" /></div> 
    <div class="t-col end" id="last"> 
     <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" 
      value="" placeholder="" /></div> 
    <div class="t-col border_none"> 
     <a href="javascript:void(0);" class="add_partners_details">Add</a> 
     <a href="javascript:void(0);" class="Remove_partners_details">Remove</a> 
    </div> 
    </div> 
    <input type="hidden" id="hdn" value="0"/> 
<input type="hidden" id="hdnParent" value="parentDiv"/>

它在我結束工作的罰款。現在你只需添加隱藏和顯示刪除和添加按鈕的邏輯。對於動態控制，您必須使用http://api.jquery.com/live/來觸發事件。請這樣做，因爲我有一些時間限制。

希望這會幫助你。請更新以獲得進一步的幫助。

來源

2013-09-25 10:38:27 Sunny

動態添加行到表中不工作使用jquery

回答

相關問題