編集モードでセルアドレスが画面に表示されるようにしてみる

yizm

5年前

『ExcelっぽいHTMLテーブル』を作る企画

前回までのバージョンまででは、tdタグの中身をそのまま更新していたけど、そのままだとあんまり装飾できないなーと思ってInitalizeの処理でtdの中にセルアドレスのspanと内容表示用のdivを仕込むようにしてみた。
とりあえず、非表示状態で仕込んでおいてセルが編集モードになった時にセルアドレスが浮き出るようにしてみた。

・・・ちょっと邪魔くさいかなー？改良の余地はありそうですが、イメージ通りです。

わんすけのサイト上だとサンプルのスタイルが崩れてキレイに表示できないなー。

今回の更新内容

      var idx = editable_table.BuildAddress(row, col);
      $td.attr("data-address", idx).css("position", "relative");
      editable_table_val[idx] = { value: $td.html(), row: row, col: col };
      var $span = $("<span />").addClass("cell-address").text(idx).hide();
      $td.html("").append($span).append($("<div />"));
      editable_table.Recalculation();

var idx = editable_table.BuildAddress(row, col);

$td.attr("data-address", idx).css("position", "relative");

editable_table_val[idx] = { value: $td.html(), row: row, col: col };

var $span = $("<span />").addClass("cell-address").text(idx).hide();

$td.html("").append($span).append($("<div />"));

editable_table.Recalculation();

        var input = $("<textarea />").attr("id", "edit_target").attr("data-address", adrs).addClass("cell-edit").text(cell_val);
        $this.toggleClass("selected",true).addClass("editing");
        $this.find('div').html("").append(input);
        $('.cell-address').fadeIn(1000);
        $("#edit_target").focus().blur(function (){
           var adrs = $(this).attr("data-address");
           var edit_val = $(this).val().toString();
           var rollback = editable_table_val[adrs].value;
           editable_table_val[adrs]["value"] = edit_val;
           if (/^=.*([A-Z]+\d+).*/.test(edit_val)) {
             if (editable_table.LoopCheck(this)) {
               alert("循環参照を検出しました。\r\nセルの内容を修正し直して下さい。");
               $(this).focus();
               editable_table_val[adrs] = rollback;
               return
             }
           }
           $(this).remove();
           $('.cell-address').fadeOut(1000);
           $("td[data-address='" + adrs + "']").toggleClass("editing", false);
           editable_table.Recalculation();
         });

var input = $("<textarea />").attr("id", "edit_target").attr("data-address", adrs).addClass("cell-edit").text(cell_val);

$this.toggleClass("selected",true).addClass("editing");

$this.find('div').html("").append(input);

$('.cell-address').fadeIn(1000);

$("#edit_target").focus().blur(function (){

var adrs = $(this).attr("data-address");

var edit_val = $(this).val().toString();

var rollback = editable_table_val[adrs].value;

editable_table_val[adrs]["value"] = edit_val;

if (/^=.*([A-Z]+\d+).*/.test(edit_val)) {

if (editable_table.LoopCheck(this)) {

alert("循環参照を検出しました。\r\nセルの内容を修正し直して下さい。");

$(this).focus();

editable_table_val[adrs] = rollback;

return

}

$(this).remove();

$('.cell-address').fadeOut(1000);

$("td[data-address='" + adrs + "']").toggleClass("editing", false);

editable_table.Recalculation();

});

line:14のあたり、力づくで既存Tableのtdタグにposition: relative突っ込んでるあたり、

ページによってはレイアウト崩れたりしそうだなーと思いながら強行してみました。

span.cell-address {
	font-size: 8px;
	position: absolute;
	z-index:9000;
	opacity: 0.5;
	top: -5px;
	left: -5px;
	padding:3px;
	background:lightsteelblue;
	-webkit-border-radius:40%;
　　　　 -moz-border-radius:40%;
	-ms-border-radius:40%;
	border-radius:40%;
}

span.cell-address {

font-size: 8px;

position: absolute;

z-index:9000;

opacity: 0.5;

top: -5px;

left: -5px;

padding:3px;

background:lightsteelblue;

-webkit-border-radius:40%;

　　　　 -moz-border-radius:40%;

-ms-border-radius:40%;

border-radius:40%;

}

CSSはまだ深い理解ができてないからいつも手探りなんだよなー。

ま、日々精進ですなっ！

次は、このセルアドレスで関数入力された場合に値を引き込む処理、いってみよう！