javascript - Dynamically create objects and dynamically add data

Question

Figure: 1. The tables on the left side are dynamically added by clicking the "Add" button above. Click on a row of the table on the left to create a table on the right (any number of rows will do), with a one-to-many relationship on the left and right. 2. When you want to add a new row on the left, create an independent object (meaning the object corresponding to each row...

我想大声告诉你 · Answer

Let me briefly describe my thoughts: Each DOM structure maintains a data object, assuming your HTML structure is (emmet syntax):

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

Then:

The above is divided into three components
.app-test is responsible for maintaining all taxpayer data (i.e. the table on the left);
Each tr in the list on the left maintains the data of the corresponding taxpayer (i.e. the table on the right);
All tr on both sides can be regarded as a small component - a sparrow is small but has all the internal organs;
summed up as: Entire functional component > left tr component + right tr component ;
You can understand it as passing values between parent and child components;

The implementation is roughly as follows:
First, the two tables belong to a functional module, assuming TaxesReport:

(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);

Both TaxesReportTaxpayer and TaxesReportReporter need to pass in a TaxesReport instance for [child component to call parent component] method or data

Click the new button on the left to create a new taxpayer:

// 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;
    }
});

Add the taxpayer’s report type on the right, such as:

// 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 );

});

When deleting, in addition to deleting the corresponding tr structure and deleting the data corresponding to tr, the two data objects involved (taxpayers on the left and reports on the right) are both array structures, and you can customize them The key name method creates a unique identifier for the new instance (taxpayer or report), and uses ··· to establish value parameters.

Since you may have static data (data with primary key identification that is not taken out from the database), and you may delete any entry in the array and cause the array subscript to be lost, so the best way is to create a createable A non-duplicate value method used to generate and add a unique identifier to the generated component (left or right).

高洛峰 · Answer

Generate a data cache and save the data in the form of key-model. There is a children in the model on the right to save the corresponding data on the right
When switching on the left, find the corresponding model.children directly from the key-model data cache and redraw the list on the right
When adding or deleting on the left side, just add and delete from the key-model data cache
The same is true when adding and deleting on the right side. At this time, you can find the corresponding model.children

Since jQuery is used, jQuery can append data to the DOM through data(), so the above key-model can directly attach each model to the DOM of each row (on the left), and append on the right It’s not a big problem if there are no additional problems

This is the idea, you can try to write down the code first

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

The following is the code that only implements the function of adding tr and deleting tr as I mentioned. I haven't created objects or added data. Does anyone have any ideas? Wait online. Urgent! ! !