0

由一些教程和 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>

一如既往地感谢，

4

3 回答 3

2

你可以使用

if ($(this).closest('table').find('tr').length<2) {
   alert ('form must have at least one row')
} else {
   $(this).closest('tr').remove();
}
于 2013-03-18T14:12:43.593 回答
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')
 }

});

在这里摆弄

于 2013-03-18T14:14:04.563 回答
1

假设为了简洁起见，您没有包含所有标记，我会很想尝试以下方式：

<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 ：（在选择器中包含 table 标记是完全没有必要的......您的类名应该可以很好地用于这些目的，并为您节省一些字符，顺便说一句......）

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/

于 2013-03-18T14:25:14.530 回答