図に示すように:
1. 上の [追加] ボタンをクリックすると、左側のテーブルが動的に追加されます。左側のテーブルの行をクリックすると、右側にテーブルが作成されます (行数は任意です)。左右に 1 対多の関係が設定されます。
2. 左側に新しい行を追加する場合は、独立したオブジェクト (各行が異なるオブジェクトに対応することを意味します) を作成し、右側の [追加] をクリックします。新しく作成された行には、ドロップダウン メニューで、ユーザーが選択を行った後、クリックしてレポートへの入力を開始します。レポートへの入力開始ボタンをクリックすると、右側のデータと左側のデータがオブジェクトに保存される必要があります。左側に一列に。 (左側の各行がオブジェクトに対応します)
3. 左右のテーブルの上に「削除」ボタンがあります。左側の「削除」ボタンをクリックすると、この行のストレージ オブジェクトが削除されますので、右側にそれに対応するデータが表示されます。もうお腹も空いていません。右側の行を選択して「削除」をクリックすると、右側のこの行のデータ ストレージのみが左側のオブジェクトから削除されます。
フレームワーク:
使用したブートストラップ jQuery
コード:
リーリーjsコード:
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私のアイデアを簡単に説明すると: 各 DOM 構造はデータ オブジェクトを維持します、HTML 構造が (emmet 構文) であると仮定します:
リーリーその後:
上記は3つのコンポーネントに分かれています
.app-testすべての納税者データ (つまり、左側のテーブル) を維持する責任があります。両側のすべてのtrは小さなコンポーネントと見なすことができます - スズメは小さいですが、すべての内臓を持っています
は次のように要約されます:
これは、親子コンポーネントの値を渡すものとして理解できます
整个功能组件 > 左侧 tr 组件 + 右侧 tr 组件まず、
:TaxesReportTaxpayer と TaxesReportReporter は両方とも、[親コンポーネントを呼び出すための子コンポーネント] メソッドまたはデータの TaxesReport インスタンスを渡す必要があります
左側の新規ボタンをクリックして新しい納税者を作成します:TaxesReportリーリー 次のような納税者のレポートタイプを右側に追加します: リーリー
削除時には、対応する tr 構造の削除と tr に対応するデータの削除に加えて、関連する 2 つのデータ オブジェクト (左側の) が値パラメーターを確立します。
静的データ (データベースから取り出されていない主キー ID を持つデータ) がある可能性があり、配列内のエントリを削除すると配列の添字が失われる可能性があるため、最良の方法は、作成可能なデータを作成することです。一意の識別子を生成し、生成されたコンポーネント (左または右) に追加するために使用される非重複値メソッド。データキャッシュを生成し、キーモデルの形式でデータを保存します。右側のモデルには、右側の対応するデータを保存するための子があります
左側に切り替えると、対応するmodel.childrenをキーモデルデータキャッシュから直接見つけて、右側のリストを再描画します
左側で追加または削除する場合は、キーモデルデータキャッシュに追加および削除するだけです
右側で追加と削除を行う場合も同様です。このとき、対応するmodel.children
jQueryを使っているので、jQueryは
の形で直接アタッチしても問題ありません。右側にあるかどうかは大きくありませんdata()を介してDOMにデータをアタッチできるので、上記のkey-modelは各行(左側)のDOMに
これがアイデアです。最初にコードを書き留めてみてください🎜