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で別に用意します。
初めから空なのでクリア処理を考える必要がなくて楽です。
phpでsmartyを利用しているならレコード行部分の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!