問題描述

如圖：1.左邊兩側(cè)的表格都是點擊 上邊“新增”按鈕動態(tài)添加出來的。點擊左側(cè)表格某一行,可以在右側(cè)創(chuàng)建表格(任意多少行都行),左右是一對多關(guān)系。2.想在左側(cè)新增行的時候,創(chuàng)建一個獨立對象(意思就是每個行對應(yīng)的對象都不一樣), 然后右側(cè)點擊新增后,新建出來的行,是帶幾個下拉菜單的,用戶選完之后,就會點擊開始填報,在點擊開始填報按鈕時,需要把右邊的數(shù)據(jù)和左邊的數(shù)據(jù),都存進左邊某一行的對象里。(左邊每一行對應(yīng)一個對象)3.左右表格上方都有’刪除’按鈕,如果點擊左側(cè)’刪除’按鈕,那么這一行的存儲對象就被刪了,于是右邊和它對應(yīng)的數(shù)據(jù)也沒餓了。如果選中右側(cè)某一行,點擊’刪除’,那么只在左側(cè)的對象里刪除右側(cè)這一行的數(shù)據(jù)存儲。

框架：用了Bootstrap jQuery

下面是代碼只有我說的添加tr刪除tr的功能實現(xiàn)。并沒有創(chuàng)建對象和添加數(shù)據(jù),有沒有老哥有思路的,在線等,急！！！

代碼：

<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 type='submit'>開始填報</button><form method='post'> <table 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代碼：

//點擊選中右側(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();})

問題解答

回答1：

簡單說下我的思路：每個 DOM 結(jié)構(gòu)維護一個數(shù)據(jù)對象，假設(shè)你的 HTML 結(jié)構(gòu)為(emmet語法)：

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

那么：

上面分為三個組件

.app-test 負責維護所有納稅人數(shù)據(jù)（即左側(cè)表格）；

左側(cè)列表的每個 tr 維護對應(yīng)納稅人的數(shù)據(jù)（即右側(cè)表格）；

兩側(cè)的所有 tr 都可以視為一個小的組件 —— 麻雀雖小五臟俱全；

總結(jié)出為：整個功能組件 > 左側(cè) tr 組件 + 右側(cè) tr 組件；

你可以理解為父子組件傳值；

大致實現(xiàn)如下：首先，兩個表格屬于一個功能模塊，假設(shè)為 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);

TaxesReportTaxpayer 和 TaxesReportReporter 都需要傳入一個 TaxesReport 實例，用于【子組件調(diào)用父組件】 方法或數(shù)據(jù)

點擊左側(cè)新建按鈕新建納稅人：

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

右側(cè)新增納稅人的報表類型，如：

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

刪除的時候，除了刪除對應(yīng)的 tr 結(jié)構(gòu)，刪除 tr 對應(yīng)的數(shù)據(jù)，涉及到的兩個數(shù)據(jù)對象（左側(cè)的 taxpayers 和 右側(cè)的 reports） 都是數(shù)組結(jié)構(gòu)，你可以為自定義鍵名方法，為新的實例（納稅人或報表）創(chuàng)建唯一標識，并使用 <tr data-identify='唯一標識'>···</tr> 建立起取值參數(shù)。

鑒于你可能都是靜態(tài)數(shù)據(jù)（非從數(shù)據(jù)庫中取出的帶有主鍵標識的數(shù)據(jù)），且可能刪除數(shù)組中的任意一個條目進而導(dǎo)致數(shù)組下標丟失，所以，最好的方法是建立一個可創(chuàng)建不重復(fù)值的方法，用以給生成的組件（左側(cè)或右側(cè)）生成并添加一個唯一標識。

回答2：

產(chǎn)生一個數(shù)據(jù)緩存，在 key-model 的形式保存數(shù)據(jù)，右邊的 model 里有一個 children 保存對應(yīng)的右側(cè)數(shù)據(jù)

左側(cè)切換的時候，直接從 key-model 數(shù)據(jù)緩存里找到對應(yīng)的 model.children，重繪右側(cè)的列表

左側(cè)添加刪除的時候?qū)?yīng)的從 key-model 數(shù)據(jù)緩存里添加刪除就好

右側(cè)添加刪除的時候也是一樣的，這個時候可以對找到對應(yīng)的 model.children

由于使用 jQuery，jQuery 可以通過 data() 把數(shù)據(jù)附加到 DOM 上，所以上述 key-model 可以直接采用之種形式把每個 model 附加到每行(左側(cè))的 DOM 上，右側(cè)附加不附加問題都不大

思路如此，代碼你可以先嘗試寫下