0

いくつかのチュートリアルと SO コミュニティのおかげで、テーブルから行を動的に追加または削除する以下の構文があります。

ユーザーがテーブル内のすべての行を削除できないようにしたい。ロード時に最初の行が削除されないように if ステートメントを挿入しました。削除後に少なくとも 1 つの行が残っている限り、すべての行を削除できるように、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

簡潔にするためにすべてのマークアップを含めなかったと仮定すると、次の行に沿って何かを試してみたくなります。

<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 に答える
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 に答える