0

nama-makanan の配列形式の数が複数の場合にセレクタ .hapus-baris-makanan にボタンを表示したい場合、セレクタ .hapus-baris-makanan 内にボタンが表示されますが、配列の数が複数の場合-form nama-makanan blank / null 、セレクター .hapus-baris-makanan のボタンが非表示になります。私が作った次のコーディング

html

 <form id="formpembayaran" method="post" action="<?php echo base_url('pembayaran/simpanitempembayaran'); ?>">

    <table class="table table-striped area-table tabel-form-makanan">
        <thead>
            <tr>
                <th>Nama Makanan</th>
                <th>Jenis Makanan</th>
                <th>Harga Makanan</th>                            
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
                    <input type="hidden" name="id-makanan[]" class="id-makanan"/>
                </td>
                <td>
                    <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
                </td>
                <td>
                    <input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
                </td>
                <td>
                    <a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

JavaScript:

$(document).ready(function(){

    var myForm = document.forms.formpembayaran;
    var idMakanan = myForm.elements['nama-makanan[]'];

    if (idMakanan.length == null){
        $('.hapus-baris-makanan').hide();
    } else {
        $('.hapus-baris-makanan').show();
    }

    $('.tombol-tambah-makanan').on('click', function(){
        var tr = '<tr>\n\
                    <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
                    <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
                    <td><input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
                    <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
                </tr>';
        $("table.tabel-form-makanan tbody").append(tr);                  
    });

    $('.tombol-reset-makanan').on('click', function(){
        $('table.tabel-form-makanan tbody tr:not(:first)').remove();
    });

    $('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
        $(this).closest('tr').remove()
    });
  });

故障箇所がわかりません。お願い助けて。ありがとうございました

4

1 に答える 1

0

これ：

var myForm = document.forms.formpembayaran;
var idMakanan = myForm.elements['nama-makanan[]'];

if (idMakanan.length == null){
    $('.hapus-baris-makanan').hide();
} else {
    $('.hapus-baris-makanan').show();
}

する必要があります：

if($('.nama-makanan').length){
    $('.hapus-baris-makanan').show();
} else {
    $('.hapus-baris-makanan').hide();
}

そして.hapus-baris-makananスタイルから始める必要がありますdisplay:none

于 2012-12-27T16:11:07.397 に答える