append table row using jQuery

Question

У меня есть пять <tr> в моей таблице, в которых четыре отображаются никому. Я хочу, когда пользователь нажимает кнопку «Добавить», тогда один tr из них отобразит блок. Я дал имя всем, как input1, input2, input3, вход4 если пользователь нажимает первый раз десять input1 будут отображать блок второй раз Input2 покажут третий блок и четвертый раз тот же соответствующий вход будет открыт

Теперь проблема, когда пользователь нажимает на отмените X кнопку, которая будет какой-либо один из из них, как 1, 2, 3, 4, будет отображаться ни один, который я хочу после этого, когда пользователь снова нажимает кнопку добавления, тогда отображается tr, который отображается none, я создаю счетчик var count, чтобы контролировать это. BUt не удается достичь t спросите, пожалуйста, помогите мне, ребята заранее спасибо вам REFF плз проверить скрипку здесь http://jsfiddle.net/pnR8e/2/ для теста просто нажмите на кнопку добавления в 4 раза, а затем нажмите на второй или третьей кнопки X и снова нажмите на кнопку добавления

Вы можете Кроме того, проверьте мой код ниже

SCRIPT

var count = 0; 
    $('.addRow').click(function() { 
     count++; 
     if($('.input'+count+'').css('display')== 'none') 
     { 
      $('.input'+count+'').css('display','block'); 
      } 
     if(count== 4) 
     { 
      $('.addRow').hide(); 
      } 
      else{ 
       $('.addRow').show(); 
       } 

    }) 

    $(document).on("click", '.delRow', function (event) { 
     $(this).parent('tr').css('display','none'); 
     count--; 

     if(count== 4) 
     { 
      $('.addRow').hide(); 
      } 
      else{ 
       $('.addRow').show(); 
       }  
    }); 

HTML

<table width="278" border="0" align="left" cellpadding="0" cellspacing="0" id="emailTable"> 
     <tr> 
      <td width="207" align="left"><input name="" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td> 
      <td width="71" align="right" valign="top"><div class="addRow">Add</div></td> 
     </tr> 
     <tr class="input1" style="display:none;"> 
      <td align="left"><input name="input" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td> 
      <td valign="middle" class="delRow">X</td> 
     </tr> 
     <tr class="input2" style="display:none;"> 
      <td align="left"><input name="input2" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td> 
     <td valign="middle" class="delRow">X</td> 
     </tr> 
     <tr class="input3" style="display:none;"> 
      <td align="left"><input name="input3" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td> 
      <td valign="middle" class="delRow">X</td> 
     </tr> 
     <tr class="input4" style="display:none;"> 
      <td align="left"><input name="input4" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td> 
      <td valign="middle" class="delRow">X</td> 
     </tr> 
      </table> 

Answer 1

При добавлении строки, вы предполагаете, что .inputX (X being count+1) в настоящее время не показано, что не должно быть так.

Решение состоит в том, чтобы найти первую скрытую строку и показать, что вместо добавления строки.

т.е.

var count = 1; 

$('.addRow').click(function() { 
    count++; 

    // show the first hidden row, instead of .inputX which may already be visible 
    $('tr:hidden:first').show(); 

    // add will ONLY increase the value of count 
    // so no need of else here 
    if(count == 4) $('.addRow').hide(); 
}); 

$(document).on("click", '.delRow', function (event) { 
    $(this).closest('tr').hide(); 
    count--; 

    // no need of any condition here, as removing will take count below 4 
    $('.addRow').show(); 
}); 

Демо:http://jsfiddle.net/pnR8e/5/