#如圖：
1.左邊兩邊的表格都是點選 上邊「新增」按鈕動態(tài)加入出來的。點選左側表格某一行,可以在右側建立表格(任意多少行都行),左右是一對多關係。
2.想在左側新增行的時候,建立一個獨立物件(意思就是每個行對應的物件都不一樣), 然後右側點選新增後,新建出來的行,是帶幾個下拉選單的,使用者選完之後,就會點選開始填報,在點選開始填報按鈕時,需要把右邊的資料和左邊的資料,都存進左邊某一行的物件裡。 (左邊每一行對應一個物件)
3.左右表格上方都有'刪除'按鈕,如果點擊左側'刪除'按鈕,那麼這一行的儲存物件就被刪了,於是右邊和它對應的數(shù)據(jù)也沒餓了。如果選中右側某一行,點擊'刪除',那麼只在左側的物件裡刪除右側這一行的資料儲存。
框架：
用了Bootstrap jQuery
程式碼：
<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程式碼：
//點擊選中右側表格的某一行
$('.zType_all').on('click','tr',function(){
//點擊某一行 此行背景色改變,其他行恢復白色。點擊的那一行添加了name屬性,然后刪除其他tr的name值,為的是之后聯(lián)系起來,有個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值,為的是之后聯(lián)系起來,有個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();
})
2
0
0
簡單說下我的思路：每個 DOM 結構維護一個資料物件，假設你的 HTML 結構為(emmet語法)：
.app-test > .col-md-5.app-test-taxpayer + .col-md-5.app-test-report那麼：
上面分為三個組件
.app-test 負責維護所有納稅人資料（即左側表格）；
左側清單的每個 tr 維護對應納稅人的資料（即右側表格）；
兩側的所有 tr 都可以視為一個小的組件 —— 麻雀雖小五臟俱全；
總結出為：整個功能組件 > 左側 tr 組件 + 右側 tr 組件；
你可以理解為父子組件傳值；
大致實現(xiàn)如下：
首先，兩個表格屬於一個功能模組，假設為 TaxesReport:
(function($){
// 左側 tr 組件
var TaxesReportTaxpayer = function(trs){
return this;
};
// 右側 tr 組件
var TaxesReportReporter = function(trs, taxpayer){
// 當前納稅人的報表，對應右側的列表條目
this.reports = [];
return this;
};
// 一個獨立的功能模塊
var TaxesReport = function(element){
// 全部納稅人，即左側列表對應的數(shù)據(jù)源
this.taxpayers = [];
// 當前選擇的納稅人，即左側列表中的紫色高亮行
this.currentTaxpayer = null;
};
// 應用實例 - 假設： .test > .col-md-5.clearfix
var trDemo = new TaxesReport( $('.app-test') );
})(jQuery);TaxesReportTaxpayer 和 TaxesReportReporter 都需要傳入一個 TaxesReport 實例，用於【子元件呼叫父元件】 方法或資料
點選左側新建按鈕新建納稅人：
// 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;
}
});
右側新增納稅人的報表類型，如：
// 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 );
// 增加數(shù)據(jù)
// _that.currentTaxpayer.setReport(report.data)
_that.currentTaxpayer.item.trigger('setReport', report.data);
// 查看是否添加成功
console.log( _that.currentTaxpayer.reports );
});
刪除的時候，除了刪除對應的tr 結構，刪除tr 對應的數(shù)據(jù)，涉及到的兩個數(shù)據(jù)對象（左側的taxpayers 和右側的reports） 都是數(shù)組結構，你可以為自定義鍵名方法，為新的實例（納稅人或報表）建立唯一標識，並使用···
鑑於你可能都是靜態(tài)資料（非從資料庫中取出的帶有主鍵標識的資料），並且可能刪除數(shù)組中的任意一個條目進而導致數(shù)組下標丟失，所以，最好的方法是建立一個可創(chuàng)建不重複值的方法，用以給產(chǎn)生的元件（左側或右側）產(chǎn)生並新增一個唯一標識。
產(chǎn)生一個數(shù)據(jù)緩存，在 key-model 的形式保存數(shù)據(jù)，右邊的 model 裡有一個 children 保存對應的右側數(shù)據(jù)
左側切換的時候，直接從 key-model 資料快取裡找到對應的 model.children，重繪右側的清單
左側新增刪除的時候對應的從 key-model 資料快取裡新增刪除就好
右側新增刪除的時候也是一樣的，這個時候可以對找到對應的 model.children
由於使用jQuery，jQuery 可以透過data() 把資料附加到DOM 上，所以上述key-model 可以直接採用之種形式把每個model 附加到每行(左邊)的DOM 上，右側附加不附加問題都不大
思路如此，程式碼你可以先試著寫下
