fc2ブログ

jQueryでテーブルを操作

jQueryを使うたびにWeb基幹システムの画面を見るのが辛くなっています。フロントエンドが悲しいぐらい貧相なのですが、基幹システムは外注のために保守の関係で手が出せません。
それはさておき、最初はjQueryのプラグインを探しては感動しホームページに使わせて頂きましたが、ちょっとしたものが無い。考えれば当たり前で、jQuery = jQueryプラグインではなくJavaScriptライブラリであり、ちょっとしたものは自分で開発しなければならないのだ。覚えるしかない。

まずはテーブル。
・1行おきに色を付ける。
・マウスが乗った行に色を付ける。
・選択行に色を付けて、再度選択されたら解除。

下記が出来上がりの表。表の上にマウスを乗せたり、クリックを!
年月沿革
2000あああああ
2001いいいいい
2002ううううう
2003えええええ
2004おおおおお

ソースは下記の通り。
<script type="text/javascript" src="jquery.js"></script">
<script language="javascript" type="text/javascript">
$(function() {
// 1行おきに色を付ける
  $(".stripe tr:nth-child(odd)").addClass("odd");
  $(".stripe tr:nth-child(even)").addClass("even");
// マウスが乗った行に色を付ける
  $(".stripe tr").mouseover(function() {
    $(this).addClass("over");
  }).mouseout(function() {
    $(this).removeClass("over");
  });
// 選択された行に色を付け、再度選択されたら解除
  $(".stripe tr").click(function() {
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else {
      $(this).addClass("selected");
    }
  });
});
</script>

<style type="text/css">
table { border-collapse:collapse; }
th, td { border:1px solid #999; }
th { background-color:#ccc; }
/* 1行おきに色を付ける */
.even { background-color:#eee; }
.odd { background-color:#fff; }
/* マウスが乗った行に色を付ける */
.over { background-color:#6699ff; }
/* 選択された行に色を付け、再度選択されたら解除 */
.selected { background-color:#6699ff; }
</style>

<table class="stripe">
  <tr><th>年月</th><th>沿革</th></tr>
  <tr><td>2000</td><td>あああああ</td></tr>
  <tr><td>2001</td><td>いいいいい</td></tr>
  <tr><td>2002</td><td>ううううう</td></tr>
  <tr><td>2003</td><td>えええええ</td></tr>
  <tr><td>2004</td><td>おおおおお</td></tr>
</table>

説明すると条件に合った要素を抜き出し、クラスの追加削除しているだけ。
htmlファイルは こちら から。

1頁に表が複数ある場合、最初下記のように記述してしまっていた。
$(".stripe tr:odd").addClass("odd");
すると複数表を1つとみて1行おきに色を付けてしまった。1つ目の表の行数が偶数になったところで、2つ目の表がおかしいことに気づきました。親要素に対して抽出する場合は ":nth-child"を記述しなければならない。
:nth-child の引数は、odd(偶数)/even(奇数)/index(番目、配列1から始まる)とのこと。
例えば  $(".stripe tr:nth-child(3)").addClass("odd"); とすれば、3行目だけ色がつく。

1行おきに色を付ける場合は、直接cssをセットすることもできます。
$(".stripe tr:odd").css("background", "#ccc");
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

Dominoでtextarea

Dominoのテキストフィールドをブラウザからtextareaで表示させたい場合、安直な方法はリッチテキスト。ただリッチテキストは使いたくないので、R4.6の頃は下記のような方法で作っていました。

フォームにフィールドを非表示で置く。Webで表示する部分にtextareaタグを記述。この時、フィールド名とtextareaのnameを同じにする。
昔のやり方

今回、ホームページをリニューアルにする際に「入力画面」→「確認画面」→「完了画面」と遷移させる予定でいます。そこで「確認画面」から訂正するため「入力画面」に戻る際、この方法ではtextareaのvalueへ値をクライアントJavaScriptで入れ直さないといけない。そこでフィールドのプロパティをいじっていたところ、下記のようにフィールドプロパティ値を変えるだけで可能でした。
毎度ですが、この方法は正攻法なのかどうなのか?

プロパティ

複数値オプションは"改行"で。"セミコロン"にするとinputタグになってしまう。
プロパティ

ここはお好みで。
プロパティ

テーマ : プログラミング
ジャンル : コンピュータ

複数値のビュー

例えば下記のような申請書フォームがあります。

設計フォーム
文書


申請書を処理する場合は申請日や申請Noでソートされたビューが必要になりますが、溜まった申請書を分析もしたくなります。例えば商品をカテゴリ別にして平均販売価格を表示などとしたい。

カテゴリに表示された配列番号と対の販売価格を明細列に表示するには、下記の通り。

ビュー

現在、基幹システム上の分析データをNotesに転送して見せています。商品 3,000アイテム × 50 営業所 × 24ヶ月の売上データをまともに作ればビューが開きません。そこで商品 + 営業所をキーに24ヶ月分の売上を複数値として持たせています。この場合、文書数は 3,000 × 50 = 150,000。ただビューでは年月ごとで見せたいのですが、今回のやり方では開かなくなってしまう。ビューからすれば 3,000 × 50 × 24 = 3,600,000明細になってしまうから。
RDBではないのはわかっていますが、データベースである以上は文書数のレスポンス低下はもう少し何とかならないものか。

列の値が比率の場合で、カテゴリ別の平均を出したいが出来ない。関数を入れることができればねぇ。

列プロパティ

テーマ : プログラミング
ジャンル : コンピュータ

プロフィール

ピヨパパ

Author:ピヨパパ
静岡市のエンドユーザーSE。
最近はDominoの開発ばかりでうんざり。
是非気軽にコメントして下さい。

FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる