As shown in the 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 that each row corresponds to a different object), and then click Add on the right. The newly created row will have several In the drop-down menu, after the user has made a selection, he will click to start filling in the report. When clicking the start filling in report button, the data on the right and the data on the left need to be stored in an object in a row on the left. (Each row on the left corresponds to an object)
3. There are 'Delete' buttons above the left and right tables. If you click the 'Delete' button on the left, the storage object in this row will be deleted, so the data corresponding to it on the right Not hungry anymore either. If you select a row on the right and click 'Delete', then only the data storage of this row on the right will be deleted in the object on the left.
Framework:
Used Bootstrap jQuery
Code:
<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>
js code:
//點擊選中右側(cè)表格的某一行
$('.zType_all').on('click','tr',function(){
//點擊某一行 此行背景色改變,其他行恢復(fù)白色。點擊的那一行添加了name屬性,然后刪除其他tr的name值,為的是之后聯(lián)系起來,有個name屬性作為橋梁,比如刪除,就可以在刪除掉對應(yīng)帶有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');
}
})
//右側(cè)刪除按鈕 點擊刪除帶有name的tr
$('.button2_del').on('click',function(){
$('tr[name=zType_tr_checked1]').remove();
})
//左側(cè)添加按鈕
$('.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>');
})
//選中左側(cè)表格的tr
$('.zType_tbody').on('click','tr',function(){
//依然還是點擊某一行 此行背景色改變,其他行恢復(fù)白色。點擊的那一行添加了name屬性,然后刪除其他tr的name值,為的是之后聯(lián)系起來,有個name屬性作為橋梁,比如刪除,就可以在刪除掉對應(yīng)帶有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');
}
})
//點擊左側(cè)刪除按鈕,刪掉左側(cè)選中的tr
$('.button1_del').on('click',function(){
$('tr[name=zType_tr_checked2]').remove();
})
2
0
0
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-reportThen:
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($){
// 左側(cè) tr 組件
var TaxesReportTaxpayer = function(trs){
return this;
};
// 右側(cè) tr 組件
var TaxesReportReporter = function(trs, taxpayer){
// 當前納稅人的報表，對應(yīng)右側(cè)的列表條目
this.reports = [];
return this;
};
// 一個獨立的功能模塊
var TaxesReport = function(element){
// 全部納稅人，即左側(cè)列表對應(yīng)的數(shù)據(jù)源
this.taxpayers = [];
// 當前選擇的納稅人，即左側(cè)列表中的紫色高亮行
this.currentTaxpayer = null;
};
// 應(yīng)用實例 - 假設(shè)： .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 );
// 新增數(shù)據(jù)
_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(){
// 請從左側(cè)選擇一個納稅人
if( !_that.currentTaxpayer ) {
console.log('請從左側(cè)選擇一個納稅人');
return;
}
// 實例化報表組件
var report = new TaxesReportReporter(_that);
// 增加行
$reportList.append( report.item );
// 增加數(shù)據(jù)
// _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 <tr data-identify="unique identifier">···</tr> 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).
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
