【jQuery】２つのデータから、IDをキーにしてひとつのテーブルに値を挿入したい。

JQueryを使用したテーブル作成でわからない部分があるので質問させてください。

以下の2つのデータがあったとします。

データ1
id, name, tel(ヘッダ)
1, taro, 0801111
2, jiro, 0901555
以下続く、、、

データ2
id, address(ヘッダ)
1, tokyo
2, osaka
以下続く、、、

ここで、ページの初期読み込み時は、データ1のデータ(50行あるとします)をfor文を使い、新たにtableタグ配下のtbodyタグ(idあり)内にappendで作成します。

その後、「表示内容を変える」ボタンを押すと、テーブル1に加えてテーブル2のaddressを新たに表示するようにしたいのです。

普通に考えれば、ボタンクリックイベントのとき、初期読み込み時と同様にforやeachのループでデータの数だけ挿入を繰り返せばいいのですが、このやり方だと、上から順番に挿入処理を繰り返しているだけのため、例えばaddressの絞り込み検索や並べ替えなどをした場合、テーブル1のname, telとテーブル2のaddressが紐付いていないことによる、表示行のズレが生じてしまいます。

そこで、どちらのテーブルにも共通で設定されている「ID(連番数値)」をキーにしてテーブル2のaddressを挿入していく方法はありませんでしょうか。

初期読み込みで作成されているテーブルのidのセルをひとつひとつチェックして、そのidと同じテーブル2のidに紐付いたaddressを、同id行のセルにループで追加挿入する、、、といったイメージです。

言葉足らずかもしれませんが、お知恵を拝借いただけますでしょうか。

よろしくお願いいたします。

No.1 回答者： fujillin 回答日時： 2016/12/07 10:46

こんにちは

全体でどのような処理を考えているのかわかりませんが、いろいろな処理をなさりたいのなら、いちいち探しても良いですが、それよりも全体のデータをスクリプト側で保持しておくのが簡単ではないでしょうか？

＞tbodyタグ内にappendで作成します。
などから推測すると、表示している表もスクリプトで作成しているもののように思われます。
idが各データのキーとなっているのなら、idをkeyとするオブジェクト形式で保持しておけば必要なデータの参照は簡単にできるようになりそうな気がします。

※ 具体的にどのようなことをなさっているのかよくわからないので、アイデアのみですが・・・
的外れでしたらスルーしてください。

この回答へのお礼

ご回答いただきありがとうございます！散々悩んできたのですが、昨日解決しました
(>_<)
結局jQueryの要素→ID取得からif文で行の並び方(連番なのか、非連番なのか)によって表示処理を変えることで見かけ上行表示のつじつまを合わせる処理にしました。
おっしゃるとおり、いったん全てを配列として取り込んでから再度テーブルを構築し直すなども考えたのですが、まだ初心者のためあまり配列の扱いも詳しくなく詰まってしまったので、今回はこちらのやり方にしました。
ありがとうございました。

お礼日時：2016/12/07 21:14