Javascript 尝试向表中动态添加一行，并使用jQuery限制为4行

我有一张没有行的桌子。我正试图通过单击锚定标记将行添加到，并限制为4。一旦到达4行，我想显示一个警告框，说明只允许4行。现在，即使在达到限制4之后，它也会继续添加行。我错过了什么

HTML代码：

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

jQuery代码：

 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>');

     });
 }

var i=1；
如果（i==4）{
警报（“仅允许4个”）；
}否则{
i++；
$（“.addmore”）。单击（函数（）{
$（“#tbaddmore”）.append(
“位置选择位置前侧后侧左侧右侧”）；
});
}

我将代码修改为下面的代码，使其正常工作

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

var i=1；
如果（i>4）{
警报（“仅允许4个”）；
}否则{
$（“.addmore”）。单击（函数（）{
$（“#tbaddmore”）.append(
“位置选择位置前侧后侧左侧右侧”）；
i++；
});
}

---

再次感谢

希望能有所帮助！谢谢，但这是添加所有的4行点击，我期待着添加一行一次最多4行。我会尝试修改您发布的代码。再次感谢