javascript - 動態創建物件,動態加數據-PHP中文網路問答

#如圖：
1.左邊兩邊的表格都是點選上邊「新增」按鈕動態加入出來的。點選左側表格某一行,可以在右側建立表格(任意多少行都行),左右是一對多關係。
2.想在左側新增行的時候,建立一個獨立物件(意思就是每個行對應的物件都不一樣), 然後右側點選新增後,新建出來的行,是帶幾個下拉選單的,使用者選完之後,就會點選開始填報,在點選開始填報按鈕時,需要把右邊的資料和左邊的資料,都存進左邊某一行的物件裡。 (左邊每一行對應一個物件)
3.左右表格上方都有'刪除'按鈕,如果點擊左側'刪除'按鈕,那麼這一行的儲存物件就被刪了,於是右邊和它對應的數據也沒餓了。如果選中右側某一行,點擊'刪除',那麼只在左側的物件裡刪除右側這一行的資料儲存。

框架：
用了Bootstrap jQuery

下面是程式碼只有我說的添加tr刪除tr的功能實作。並沒有創建對象和添加數據,有沒有老哥有思路的,在線等,急！！！

程式碼：

       纳税人识别号  纳税人名称  
 
  
 
 
     
    计算期类型  期间  征收方式

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 $('.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(); })

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

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

全部回覆 (2)

我想大声告诉你2017-07-05 10:46:16 2樓

簡單說下我的思路：每個 DOM 結構維護一個資料物件，假設你的 HTML 結構為(emmet語法)：

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

那麼：

上面分為三個組件
.app-test負責維護所有納稅人資料（即左側表格）；
左側清單的每個 tr 維護對應納稅人的資料（即右側表格）；
兩側的所有 tr 都可以視為一個小的組件 —— 麻雀雖小五臟俱全；
總結出為：整個功能組件 > 左側 tr 組件 + 右側 tr 組件；
你可以理解為父子組件傳值；

大致實現如下：
首先，兩個表格屬於一個功能模組，假設為TaxesReport:

TaxesReportTaxpayer 和 TaxesReportReporter 都需要傳入一個 TaxesReport 實例，用於【子元件呼叫父元件】方法或資料

點選左側新建按鈕新建納稅人：

右側新增納稅人的報表類型，如：

刪除的時候，除了刪除對應的tr 結構，刪除tr 對應的數據，涉及到的兩個數據對象（左側的taxpayers和右側的reports）都是數組結構，你可以為自定義鍵名方法，為新的實例（納稅人或報表）建立唯一標識，並使用···建立起取值參數。

鑑於你可能都是靜態資料（非從資料庫中取出的帶有主鍵標識的資料），並且可能刪除數組中的任意一個條目進而導致數組下標丟失，所以，最好的方法是建立一個可創建不重複值的方法，用以給產生的元件（左側或右側）產生並新增一個唯一標識。

點贊+0

新增回覆

小葫芦2017-07-05 10:46:16 1樓

產生一個數據緩存，在 key-model 的形式保存數據，右邊的 model 裡有一個 children 保存對應的右側數據
左側切換的時候，直接從 key-model 資料快取裡找到對應的 model.children，重繪右側的清單
左側新增刪除的時候對應的從 key-model 資料快取裡新增刪除就好
右側新增刪除的時候也是一樣的，這個時候可以對找到對應的 model.children

由於使用jQuery，jQuery 可以透過data()把資料附加到DOM 上，所以上述key-model 可以直接採用之種形式把每個model 附加到每行(左邊)的DOM 上，右側附加不附加問題都不大

思路如此，程式碼你可以先試著寫下

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

下面是程式碼只有我說的添加tr刪除tr的功能實作。並沒有創建對象和添加數據,有沒有老哥有思路的,在線等,急！！！

下面是程式碼只有我說的添加tr刪除tr的功能實作。並沒有創建對象和添加數據,有沒有老哥有思路的,在線等,急！ ！ ！

下面是程式碼只有我說的添加tr刪除tr的功能實作。並沒有創建對象和添加數據,有沒有老哥有思路的,在線等,急！！！