動きとしては、クリッカブルマップに近いものがあるのかな？
テーブルタグで表示している一覧表の中で、特定位置に表示させた文字列をクリックしたときだけ、特別な処理を行いたい、という場合の処理方法です。
とりあえず前提条件
DBからデータを読み込み、1行1レコードずつテーブルタグを使って表示しています。
データの編集ができるように、行のどこをクリックしても、編集画面に遷移します。つまり、trタグにクリックイベントを設定している状態です。
今回、このデータを保存しているテーブルに、アップロードした画像のリンクを保存するためのカラムを追加することになりました。
画像のアップロード処理等はPHP側で行い、カラムにはURLがセットされる形となります。
今回の改修ポイント
テーブルタグを使って1行1レコード表示している中、行の縦幅、列の横幅ともに変更できない（固定値で決められている）関係で、画像を表示させるスペースがありません。
そこで、画像が存在するレコードは、特定のカラムに「★」マークを表示し、この「★」をクリックするとポップアップで画像が表示されるようにしてほしい、との依頼があったのです。
処理を改修していく
とりあえず、画像があるレコードのときに「★」を表示し、クリックしたら画像が表示されるところまでは簡単でした。
しかし、trタグにクリックイベントが仕込まれているため、画像を表示すると同時に、該当レコードの編集画面に遷移してしまいます。
動きとしては、今まで同様、行をクリックしたら編集画面へ遷移し、「★」をクリックしたときだけ、画像が表示されなければいけません。
変更前の処理
trタグにonclickが記述されています。
<tr class="edit" onclick="location.href='edit.php?id=<?php print $record['ID']; ?>'">
レコードのIDをパラメータとして編集画面に渡しているようです。ということは、jQuery側でIDを取得できるようにすれば、何とかいけそう。
変更後の処理
この変更依頼、大至急、急いで、とまくしたてられたため、とりあえず突貫で修正した結果がこちら。
テーブルタグ
<tr class="edit" id="<?php print $record['ID']; ?>">
「★」表示部分
<a href="<?php print $record['image_url']; ?>" class="photo_link">★</a>
jQuery
$(function(){
$("tr").click(function(e){
var record_id = $(this).attr("id");
if( !$(e.target).hasClass("photo_link") ){
location.href = 'edit.php?id='+record_id;
}
});
});
改修内容の解説
trタグ内をクリックしたら、trタグに指定されたidの値を取得して、そのidの値を編集ページへのリンクパラメータに渡してあげる。
そのために、trタグにはレコードIDをidとしてセットしてあげる。
jQuery側は、クリックされたターゲットに「photo_link」というクラスが指定されていなければページ遷移をする。
これで、とりあえず行がクリックされれば編集画面へ遷移するけど、「★」をクリックしたときは遷移せずに画像を表示するだけ、という処理の完成。
ちなみに、特定の行だけクリック処理を外したい場合は、上記jQueryの判定文を以下のように修正することで可能となる。
if( !$(e.target).hasClass("photo_link") && !$(this).is("#exclude_line") )
この場合、trタグにexclude_lineというidが指定された行を除外する。
突貫工事なので、時間があるときにもう少し書き換えたいところですが、とりあえず動きとしてはOKかな。
お粗末さまでした。
初稿：2019年1月19日
コメント