запрещает пользователю удалять все строки таблицы с помощью jQuery

Question

любезно предоставлено несколькими учебниками и сообществом SO. У меня есть синтаксис ниже, который динамически добавляет или удаляет строки из таблицы.

Я хочу, чтобы пользователь не мог удалять все строки в таблице. Я включил оператор if, чтобы предотвратить удаление первой строки при загрузке, как получить счет всех строк таблицы для использования в инструкции if, чтобы я мог удалить все строки до тех пор, пока по крайней мере одна оставшаяся строка после удаления ?

мой синтаксис:

<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><td><a class="deleteRow"> x </a></td></tr> 

<script type="text/javascript"> 
var counter = 1; 
jQuery("table.authors-list").on('change','input[name^="first_name"]',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><td><a class="deleteRow"> x </a></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
}); 

jQuery("table.authors-list").on('click','.deleteRow',function(event){ 
    console.log('h'); 
    if (counter==1) { alert ('form must have at least one row')} else { 
    $(this).closest('tr').remove(); 
} 
}); 
</script> 

Спасибо, как всегда,

Answer 1

мы встретимся снова ..... В любом случае

попробовать этот

jQuery("table.authors-list").on('click','.deleteRow',function(event){ 
if ($(this).parents('table').find('tr').length > 2) { 
    $(this).closest('tr').remove(); 
}else{ 
    alert ('form must have at least one row') 
} 

}); 

fiddle here

Answer 2

Вы можете использовать

if ($(this).closest('table').find('tr').length<2) { 
    alert ('form must have at least one row') 
} else { 
    $(this).closest('tr').remove(); 
} 

Answer 3

Предполагая, что вы не включили всю разметку для краткости, я был бы соблазн попробовать что-то вдоль этих линий:

<table class="authors-list"> 
    <!-- for one thing, let's separate our table structure a little better --> 
    <thead> 
     <tr> 
      <td>author's first name</td> 
      <td>author's last name</td> 
     </tr> 
    </thead> 
    <!-- ... in this way, you don't have to manually exclude the header rows from your count --> 
    <tbody> 
     <tr> 
      <td> 
       <input type="text" name="first_name" /> 
      </td> 
      <td> 
       <input type="text" name="last_name" /> 
      </td> 
      <td><a class="deleteRow"> x </a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Вы можете перейти к JavaScript: (Это совершенно не нужно, чтобы включить тег таблицы в селекторе ... ваш имя_класс должен работать нормально для этих целей, и спасает вас несколько персонажей, кстати ...)

jQuery(".authors-list tbody").on('change', 'input[name^="first_name"]', function (event) { 
    event.preventDefault(); 
    // get the number of rows, here 
    var counter = $(".authors-list tbody tr").length; 
    // also, you don't need to wrap newRow in a jQuery() call... append() does that for you 
    var newRow = '<tr><td><input type="text" name="first_name' + counter + '" /></td><td><input type="text" name="last_name' + counter + '" /></td><td><a class="deleteRow"> x </a></td></tr>'; 
    jQuery('.authors-list tbody').append(newRow); 
}); 

jQuery(".authors-list tbody").on('click', '.deleteRow', function (event) { 
    // get the counter at the point in time when you're trying to test deletion 
    var counter = $(".authors-list tbody tr").length; 
    if (counter == 1) { 
     alert('form must have at least one row') 
    } else { 
     $(this).closest('tr').remove(); 
    } 
}); 

http://jsfiddle.net/mori57/BsaZY/2/