如何停止在jQuery中添加多行

问题描述

我有一张这样的桌子：

<table class="authors-list">
    <tr><td>author's first name</td><td>author's last name</td></tr>
    <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>

然后我创建了一个加号，用于在表的末尾添加另一行：

<div style="left:20px;" class="plus add-service" id="plus">
    <div class="plus__line plus__line--v">
    </div>
    <div class="plus__line plus__line--h"></div>
</div>

这是可以执行此操作的脚本：

var counter = 1;
jQuery('div.add-service').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});

它工作正常，但是我想在表中已经添加一行时禁用添加按钮操作。因此，代替添加额外的行，可以显示一条警告消息，并通知用户您已经添加了行。

那么您知道该怎么做吗？如果您愿意，请告诉我，我将非常感谢！

谢谢...

解决方法

简单的if else条件有效

var counter = 1;
$(document).ready(function(){
    jQuery('div.add-service').click(function(event){
        event.preventDefault();
        if(counter==1){
        counter++;
          var newRow = jQuery('<tr><td><input type="text" name="first_name' +
              counter + '"/></td><td><input type="text" name="last_name' +
              counter + '"/></td></tr>');
          jQuery('table.authors-list').append(newRow);
        }else{
            alert("you have already added a row");
        }
    });
});

这是小提琴：https://jsfiddle.net/a23stmoe/