Question

我的表中有五个<tr>，其中四个显示我想要的当用户点击添加按钮然后其中一个tr将显示块我给了所有的名字，如input1，input2，input3，input4如果用户第一次点击10输入1将显示块第二次输入2将显示第三和第四次块相同的输入将打开

现在的问题是，当用户点击取消 X 按钮时，这些按钮中的任何一个就像1,2,3,4中的任何一个都将显示在我之后我想要的任何一个当用户再次点击添加按钮然后显示没有的tr将出现我创建一个var命名计数来控制这个.. BUt未能完成任务请帮助我们提前感谢你reff plz检查小提琴这里 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/

使用jQuery追加表行

1 个答案: