javascriptでテーブル行挿入処理を雑に実装する

( ´_ゝ`)ノシ
yoshitiaです。
phpの現場が忙しく、
1年の6分の1経っても新しく記事が書けてないので凹んでます。

 

本題。

php案件と言いつつ今時は画面側の処理書く時に

javascriptはセットなわけで。

大抵は使用するwebアプリケーションフレームワーク

基本的な処理は入ってるのですが

THE・Excelなセル結合を駆使したネ申フォーマットの前には無力です。

どなたかクライアントに1レコード行あたりにtrタグ何個も使って

colspanやrowspanをフルに使う寄木細工フォーマットは

作る側も保守・運用する側も地獄ってことを

伝えていただけないでしょうか(虚空に消えていく愚痴)

 

本記事はそういうネ申フォーマットに行挿入処理を実装する時の方法です。

 

1. コピー用のレコード行を別に用意する

 trタグ1つ、つまり1行で済むなら

元からあるレコード行をcloneNode(true)して

inputタグの中身をクリアしたら一丁あがりだと思います。

もしくはタグ生成処理をして追加するかかと。

が、複数行にまたがる場合、trタグ毎に処理実装が必要になり、

html部分の変更が生じるとtrタグ毎の処理を1行ずつ確認して

修正になります。

(colspanやrowspanを使っているのでどのtrタグにあるかわかりにくい)

 

そこでcloneNode(true)用のレコード行をdisplay:noneで別に用意します。

初めから空なのでクリア処理を考える必要がなくて楽です。

phpsmartyを利用しているならレコード行部分のhtmlを1つのtplファイルに書いて

表示する部分とdisplay: noneのtableタグの中身に出力するようにすると

html部分の変更が生じてもレコード行部分のhtmlを記述したtplファイルの中を修正するだけで終わるのでメンテしやすいです。

    <table id="table_copy" style="display: none;" >
          <tr>レコード行1/2</tr>
          <tr>レコード行2/2</tr>
    </table> 

2. javascriptで1をコピーする行挿入処理を実装する

大体こんな感じの処理になると思います。

function row_insert(行挿入ボタンの要素) {

//table要素が取れるまでparentNodeを繋げる var table_tag = 行挿入ボタンの要素.parentNode.parentNode;
//tr要素が取れるまでparentNodeを繋げる
var tr_tag = 行挿入ボタンの要素.parentNode;

//コピー用のtable要素取得
var copy_table_tag = document.getElementById("copy_table");

//挿入行のインデックスを取得
var index = tr_tag.rowIndex;

//挿入行にtrタグを差し込む(1)
table_tag.insertRow(index);

//コピー用table要素から1行目をコピー(2)
var copy_tr_tag1 = copy_table_tag.rows[0].cloneNode(true);

//差し込んだtrタグに中身を格納する(3)
table_tag.rows[index].innerHTML = copy_tr_tag.innerHTML;

//2行目以降はindex+1,index+2・・・,copy_table_tag.rows[1],[2],・・・で処理を調整する }

後は必要に応じて処理を修正していけばいいかと。

3. まとめ

取りあえずこの記事書いてみましたが

この実装でもメンテ大変そうな気がするので

可能なら

レコード行をtrタグ1個の中に納めませんか?

せめてrowspan使うのやめませんか?

って確認or提案した方が幸せになれる気がします。

 

願わくばこの記事読んでる人がこういう意見・提案を

聞いてもらえるお仕事でありますように。

 

Happy Javascript life!