javascript - 当 jquery 中没有要添加的值时，如何停止在表中添加行

Question

我正在使用 jquery 在表中添加行，但现在我想在输入框为空时停止添加。目前，即使框是空的，它也会不断添加行。我的下面的代码不起作用，我不知道如何阻止它。有人能帮助我吗。

这是我的代码:

$('#voucher-btn').click(function(e){
    var scratchPan = $('#scratch-panel'),
            serNum = $('#serial-num');

    $('#voucher-list > tbody').append('<tr><td>'
                                      + scratchPan.val() 
                                      +'</td><td>'+ serNum.val() 
                                      +'</td></tr>');

    if($('#scratch-panel').val() === ''|| $('#serial-num').val() === '' ){
        return false;
    }
});

HTML:

<ul>
  <li>
   <label>Scratch Panel</label>
   <input type="text" id="scratch-panel" />
  </li> 
  <li>
   <label>Serial Number</label>
   <input type="text" id="serial-num" />
  </li>
  <li><button id="voucher-btn" type="submit" title="Apply">Apply</button></li>
</ul>

<table id="voucher-list">
<thead>
  <tr>
    <th>$Value One</th><th>$Value Two</th><th>$Value Three</th>
  </tr>
</thead>
<tbody></tbody>

非常感谢

Answer 1

不确定我是否正确理解了这个问题，但我认为您应该将空支票移至添加行之前。

$('#voucher-btn').click(function(e){
    var scratchPan = $('#scratch-panel'),
            serNum = $('#serial-num');

    if(scratchPan.val() === ''|| serNum .val() === '' ){
        return false;
    }
    $('#voucher-list > tbody').append(
       '<tr><td>'+ scratchPan.val() +'</td><td>'+ serNum.val() +'</td></tr>');

});