append table row using jQuery

Question

I have five <tr> in my table in which four are displayed none I want when user click on Add button then one tr among of these will display block I gave name to all like input1, input2, input3, input4 if user click first time ten input1 will display block second time input2 will display block third and fourth time the same appropriate input will open

Now the problem is when user click on cancel X button which would be any one among of these like 1, 2, 3, 4 any will be display none I want after that when user click again on add button then the tr which is displayed none will appear I create a var named count to controll this .. BUt fail to achieve the task please help me guys thanks in advance for you reff plz check fiddle here http://jsfiddle.net/pnR8e/2/ for test just click on add button 4 times and then click on second or third X button and again click on add button

You can also check my code below

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>

I understand. Might not be attractive to read, though. Just saying. — Mathias Müller
– Mathias Müller, Commented Jan 27, 2014 at 13:21

techfoobar · Accepted Answer · 2014-01-27 13:48:32Z

1

When you add a row, you assume that .inputX (X being count+1) is currently not shown, which need not be the case.

The solution is to find the first hidden row and show that instead when adding a row.

i.e.

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();
});

Demo: http://jsfiddle.net/pnR8e/5/

answered Jan 27, 2014 at 13:48

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

append table row using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related