尝试动态地向表添加一行,并使用jQuery限制为4行

时间:2017-03-22 17:49:11

标签: javascript jquery html

我有一张没有行的表。我试图通过点击锚标记添加行,并限制为4.一旦达到4行,我想显示一个警告框,说只允许4行。现在它只是在达到限制4后继续添加行。我缺少什么

HTML CODE:

<table id="tbaddmore"></table>
    <div id="add-location"><a href="javascript:void(0);" class="addmore">Add one more location</a></div>

jQuery CODE:

 var i = 1;
 if (i == 4) {
     alert("only 4 allowed");
 } else {
     i++;
     $(".addmore").click(function() {
         $("#tbaddmore").append(
             '<tr><td><div class="pc-row"><div class="locations-colors pc-col"><label for="location_[' + i + ']"><span>Location</span><select name="location_[' + i + ']" id="location_[' + i + ']"><option value="">choose location</option><option value="front">Front Side</option><option value="back">Back Side</option><option value="left">Left Side</option><option value="right">Right Side</option></select></label></div></div></td></tr>');

     });
 }

1 个答案:

答案 0 :(得分:0)

我把它修改为下面的代码

var i = 1;
 if (i > 4) {
     alert("only 4 allowed");
 } else {
      $(".addmore").click(function() {
         $("#tbaddmore").append(
             '<tr><td><div class="pc-row"><div class="locations-colors pc-col"><label for="location_[' + i + ']"><span>Location</span><select name="location_[' + i + ']" id="location_[' + i + ']"><option value="">choose location</option><option value="front">Front Side</option><option value="back">Back Side</option><option value="left">Left Side</option><option value="right">Right Side</option></select></label></div></div></td></tr>');
     i++;
     });
 }

再次感谢