CODEWITHSUNDEEP
javascriptjquery
user6601036
user6601036

Reputation:

jquery add/rows to the table dynamically

I am using the following JSfiddle to work on and it works well. only concern is, i am unable to make the field names dynamic

can someone guide what i am doing wrong here

http://jsfiddle.net/k166m6m6/913/

Code: 

<div>
      <input type="button" value="Add" class="plusbtn" />
      <input type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
  <tr>
    <td>Name</td>
    <td>Emp no.</td>
    <td>Company</td>
    <td>Mobile no.</td>
  </tr>
  <tr>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
  </tr>
</table>

jquery code 

$('.plusbtn').click(function() {
        var cnt = 1;
      $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed'+cnt+'" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
      cnt++;
    });
    $('.minusbtn').click(function() {
        if($(".test tr").length != 2)
            {
                $(".test tr:last-child").remove();
            }
       else
            {
                alert("You cannot delete first row");
            }
    });

Upvotes: 0

Views: 47

Answers (2)

Charli W.
Charli W.

Reputation: 71

Because 'cnt' is declared inside your click function var cnt = 1; is getting reset with every click. Just move it outside of your function.

Here's an example: http://jsfiddle.net/k166m6m6/917/

Upvotes: 1

Andrew Li
Andrew Li

Reputation: 57982

You redeclare cnt every time you click because it's inside the click function. This means that it's in the functions scope, and it will reset to 1 on every click. Move it outside so that it does not reset on click as it will not be redeclared:

var cnt = 1;

$('.plusbtn').click(function() {
  $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed' + cnt + '" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
  cnt++;
});
$('.minusbtn').click(function() {
  if ($(".test tr").length != 2) {
    $(".test tr:last-child").remove();
  } else {
    alert("You cannot delete first row");
  }
});
.txtbox {
  border: none;
  width: 100%;
}
input {
  font-size: 17px;
  height: 30px;
}
table {
  background: none repeat scroll 0 0 #abcdef;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="button" value="Add" class="plusbtn" />
  <input type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
  <tr>
    <td>Name</td>
    <td>Emp no.</td>
    <td>Company</td>
    <td>Mobile no.</td>
  </tr>
  <tr>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions