javascript - Buat objek secara dinamik dan tambah data secara dinamik

Question

Seperti yang ditunjukkan dalam gambar:
1 Jadual di sebelah kiri ditambah secara dinamik dengan mengklik butang "Tambah" di atas. Klik pada baris jadual di sebelah kiri untuk membuat jadual di sebelah kanan (sebarang bilangan baris akan sesuai), dengan perhubungan satu-dengan-banyak di kiri dan kanan.
2 Apabila anda ingin menambah baris baharu di sebelah kiri, cipta objek bebas (bermaksud setiap baris sepadan dengan objek berbeza), kemudian klik Tambah di sebelah kanan, dan baris yang baru dibuat akan mempunyai beberapa menu lungsur. . Ya, selepas pengguna selesai memilih, dia akan mengklik untuk mula mengisi laporan Apabila dia mengklik butang mula mengisi laporan, dia perlu menyimpan data di sebelah kanan dan data di sebelah kiri ke dalam objek. baris di sebelah kiri. (Setiap baris di sebelah kiri sepadan dengan objek)
3 Terdapat butang 'Padam' di atas jadual kiri dan kanan Jika anda mengklik butang 'Padam' di sebelah kiri, objek storan dalam baris ini akan dipadamkan data yang sepadan dengannya di sebelah kanan tidak akan dipadamkan. Jika anda memilih baris di sebelah kanan dan klik 'Padam', maka hanya storan data baris ini di sebelah kanan akan dipadamkan dalam objek di sebelah kiri.

Kerangka:
Bootstrap jQuery terpakai

Berikut ialah kod yang hanya melaksanakan fungsi menambah tr dan memadam tr seperti yang saya nyatakan. Saya belum mencipta objek atau menambah data Adakah sesiapa mempunyai sebarang idea? ! !

Kod:

<p class="col-md-5 clearfix">
        <button class="button1">新增</button>
        <button class="button1_del">删除</button>
        <table border="1px solid #000" class="text-center">
            <thead class="zType_thead text-center">
                <tr>
                    <th></th>
                    <th>纳税人识别号</th>
                    <th>纳税人名称</th>
                </tr>
            </thead>
            <tbody class="zType_tbody">
            </tbody>
        </table>
    </p>
    <p class="col-md-offset-1 col-md-5">
        <button class="button2">新增</button>
        <button class="button2_del">删除</button>
        <button class="baocun_button" type="submit">开始填报</button>
        <form class="clearfix" method="post">
            <table class="zType_table text-center" border="1px solid #000">
                <thead>
                    <tr class="zType_table_th">
                        <th>计算期类型</th>
                        <th>期间</th>
                        <th>征收方式</th>
                    </tr>
                </thead>
                <tbody class="zType_all">
                </tbody>
            </table>
        </form>
    </p>

Kod js:

   

        //点击选中右侧表格的某一行
        $('.zType_all').on('click','tr',function(){
        //点击某一行 此行背景色改变,其他行恢复白色。点击的那一行添加了name属性,然后删除其他tr的name值,为的是之后联系起来,有个name属性作为桥梁,比如删除,就可以在删除掉对应带有name值的tr
        $('.zType_all').children().css({"background":"#fff","color":"#000"}).removeAttr('name');
            $(this).css({"background":"#bfaadc","color":"#000"});
            if(!$(this).attr('name')){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                $(this).attr("name",'zType_tr_checked1');
            }
        })
        //右侧删除按钮 点击删除带有name的tr
        $('.button2_del').on('click',function(){
            $('tr[name=zType_tr_checked1]').remove();
        })
        //左侧添加按钮
        $('.button1').on('click',function(){
            $('.zType_tbody').append('<tr><td><span class="glyphicon glyphicon-chevron-right"></span></td><td><input type="text" name="shibiehao"></td><td><input type="text" name="mingcheng"></td></tr>');
        })
        //选中左侧表格的tr
        $('.zType_tbody').on('click','tr',function(){
            //依然还是点击某一行 此行背景色改变,其他行恢复白色。点击的那一行添加了name属性,然后删除其他tr的name值,为的是之后联系起来,有个name属性作为桥梁,比如删除,就可以在删除掉对应带有name值的tr
            $('.zType_tbody').children().css({"background":"#fff"}).removeAttr('name');
            $(this).css({"background":"#bfaadc"}).children().eq(0).children()
            if(!$(this).attr('name')){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                $(this).attr("name",'zType_tr_checked2');
            }
        })
        //点击左侧删除按钮,删掉左侧选中的tr
        $('.button1_del').on('click',function(){
            $('tr[name=zType_tr_checked2]').remove();
        })

Answer 1

Izinkan saya menerangkan secara ringkas pendapat saya: Setiap struktur DOM mengekalkan objek data, dengan mengandaikan struktur HTML anda ialah (sintaks emmet):

.app-test > .col-md-5.app-test-taxpayer + .col-md-5.app-test-report

Kemudian:

• Di atas terbahagi kepada tiga komponen

• .app-test Bertanggungjawab untuk mengekalkan semua data pembayar cukai (iaitu jadual di sebelah kiri);

Setiap tr dalam senarai di sebelah kiri mengekalkan data pembayar cukai yang sepadan (iaitu jadual di sebelah kanan);

• Semua tr ​​pada kedua-dua belah boleh dianggap sebagai komponen kecil - burung pipit kecil tetapi mempunyai semua organ dalaman

• diringkaskan sebagai:

  ;

• 整个功能组件 > 左侧 tr 组件 + 右侧 tr 组件Anda boleh memahaminya sebagai nilai lulus ​​​​untuk komponen ibu bapa-anak

• Pelaksanaan kasar adalah seperti berikut:

  Pertama, kedua-dua jadual tergolong dalam modul berfungsi, dengan andaian
:

(function($){
    // 左侧 tr 组件
    var TaxesReportTaxpayer = function(trs){
        return this;
    };
    
    // 右侧 tr 组件
    var TaxesReportReporter = function(trs, taxpayer){
        
        // 当前纳税人的报表，对应右侧的列表条目
        this.reports = [];
    
        return this;
    };
    
    // 一个独立的功能模块
    var TaxesReport = function(element){
        // 全部纳税人，即左侧列表对应的数据源
        this.taxpayers = [];
        
        // 当前选择的纳税人，即左侧列表中的紫色高亮行
        this.currentTaxpayer = null;
    };
    
    // 应用实例 - 假设： .test > .col-md-5.clearfix
    var trDemo = new TaxesReport( $('.app-test') );
    
})(jQuery);

Kedua-dua TaxesReportTaxpayer dan TaxesReportReporter perlu lulus dalam contoh TaxesReport untuk kaedah atau data [komponen anak untuk memanggil komponen induk]TaxesReport

Klik butang baharu di sebelah kiri untuk mencipta pembayar cukai baharu:

// TaxesReport() 中
var _that = this,
    $taxpayerAdd = $('.button1),
    $taxpayerList = $('.zType_tbody');
   
// 新建纳税人 
$taxpayerAdd.on('click', function(){
    // 实例化纳税人组件
    var taxpayer = new TaxesReportTaxpayer(_that);
    
    // 增加行
    $taxpayerList.append( taxpayer.item );
    
    // 新增数据
    _that.setTaxpayer( taxpayer.data );
    
    // 自动高亮
    if(!_that.currentTaxpayer) {
        _that.currentTaxpayer = taxpayer;
    }
});

Tambahkan jenis laporan pembayar cukai di sebelah kanan, seperti:

// TaxesReport() 中
var _that = this,
    $reportAdd = $('.button2'),
    $reportList = $('.zType_all');
    
// 新增纳税人报表类型
$reportAdd.on('click', function(){
    // 请从左侧选择一个纳税人
    if( !_that.currentTaxpayer ) {
        console.log('请从左侧选择一个纳税人');
        return;
    }
    
    // 实例化报表组件
    var report = new TaxesReportReporter(_that);
    
    // 增加行
    $reportList.append( report.item );
    
    // 增加数据
    // _that.currentTaxpayer.setReport(report.data)
    _that.currentTaxpayer.item.trigger('setReport', report.data);
    
    // 查看是否添加成功
    console.log( _that.currentTaxpayer.reports );

});
    

Apabila memadam, selain daripada memadamkan struktur tr yang sepadan dan memadamkan data yang sepadan dengan tr, dua objek data yang terlibat (

di sebelah kiri) mewujudkan parameter nilai

Memandangkan anda mungkin mempunyai data statik (data dengan pengenalan kunci utama yang tidak dikeluarkan daripada pangkalan data), dan anda boleh memadamkan mana-mana entri dalam tatasusunan dan menyebabkan subskrip tatasusunan hilang, jadi cara terbaik ialah mencipta yang boleh dicipta Kaedah nilai bukan pendua yang digunakan untuk menjana dan menambah pengecam unik pada komponen yang dijana (kiri atau kanan).

Answer 2

1. Jana cache data dan simpan data dalam bentuk model kunci Terdapat kanak-kanak dalam model di sebelah kanan untuk menyimpan data yang sepadan di sebelah kanan

2. Apabila beralih ke kiri, cari model yang sepadan.kanak-kanak terus dari cache data model kunci dan lukis semula senarai di sebelah kanan

3. Apabila menambah atau memadam di sebelah kiri, cuma tambah dan padam daripada cache data model kunci

4. Begitu juga apabila menambah dan memadam di sebelah kanan Pada masa ini, anda boleh mencari model yang sepadan.kanak-kanak

Memandangkan jQuery digunakan, jQuery boleh melampirkan data ke DOM melalui data(), jadi model kunci di atas boleh terus melampirkan setiap model ke DOM setiap baris (sebelah kiri) dalam bentuk

Tidak ada masalah sama ada untuk dilampirkan ia ke sebelah kanan atau tidak

Ini ideanya, boleh cuba tulis kod dulu