質問箱/5436 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 質問箱/5436 へ行く。
• 質問箱/5436 の差分を削除

#author("2021-10-20T00:34:01+09:00","","")
#author("2021-10-20T00:34:21+09:00","","")
**[[質問箱/5436]] [#if6895ce]
|RIGHT:70|LEFT:410|c
|~カテゴリ|デザイン・CSS・スキン|
|~サマリ|テーブルの条件付き書式|
|~バージョン|1.5.3|
|~投稿者|[[質問です]]|
|~状態|質問|
|~状態|完了|
|~投稿日|&new{2021-10-18 (月) 00:02:07};|
***質問 [#d9c76294]
ここを見てて思ったのですが「状態」に書かれた内容に応じて一覧画面の色が変わっていることに気付きました。

専用のプラグインだとは思うのですが、普通にテーブルを作成し特定の文字列があった場合にそのセル?だけ背景色を変えることは出来ますか？

[[質問箱/4099]]と[[質問箱/4243]]とは少し違い、あくまで入力した文字列によって背景色を自動で変えたいです。

例えば以下のようなテーブルがあった場合に「完了」と書かれたところ（あるいは行）だけ自動で緑に変わるといった挙動です。
|ステータス|日付|内容|
|着手中|21/10/1|あ|
|BGCOLOR(#00AE95):完了|21/10/2|い|
|保留|21/10/3|う|
先日に引き続き恐縮ですが、お手すきの際にご確認いただければ幸いです。

***回答 [#w22317da]
- 専用のプラグインというのはtrackerプラグインですね。&br;PukiWikiのデフォルトのテーブルにその機能は備わっていないのでPukiWiki本体を改変するか、プラグインをつくらないといけないと思います。 -- [[-]] &new{2021-10-18 (月) 18:14:58};
- 表書式の「BGCOLOR(RED) :」みたいなのを戻すテストプラグインを表内に書いてみましたが、適用されず。表解析処理部分から手を入れないとダメっぽいです。 -- [[HarukaTomose]] &new{2021-10-18 (月) 21:28:53};
-- あああ 、ここでてきようされてしまった -- [[HarukaTomose]] &new{2021-10-18 (月) 21:29:11};
-- 「ＢＧＣＯＬＯＲ（色）：」を戻すようなプラグインで試したけどダメだった、ということです -- [[HarukaTomose]] &new{2021-10-18 (月) 21:30:00};
- 何かと使えそうだったのでプラグインとして作ってみました。https://jpngamerswiki.com/?0bf31029b2 -- [[kanateko]] &new{2021-10-18 (月) 21:48:01};
- なるほど、表のほうをパラメータにして先に入れ替えているんですね。 -- [[HarukaTomose]] &new{2021-10-18 (月) 21:59:58};
- 現状この方法だといくつか問題点があるのですが、先に書式を挿入する以外だとセルの内容をdata属性に入れてCSSやJavaScriptでスタイル指定するとかですかね -- [[kanateko]] &new{2021-10-18 (月) 22:46:24};
- 既存のテーブル解析ロジックに手を入れるのは結構大変なので最近はなんでもJavaScriptで解決しようとしてしまいます。↓これで '完了' => 'red' あたりを指定するプラグインを作れば... -- [[umorigu]] &new{2021-10-19 (火) 00:36:08};
 var tables = document.querySelectorAll('table.style_table');
 for (var t of tables) {
   for (var r of t.rows) {
     for (var c of r.cells) {
       if (c.textContent == '完了') {
         c.style.backgroundColor = 'red';
       }
     }
   }
 }
- kanateko様、[[質問箱/5434]]に引き続きありがとうございます。tableifプラグインが期待以上のもので感激しております…(;_;) kanateko様含め、ご確認いただいた皆様も本当にありがとうございました！ -- [[質問です]] &new{2021-10-20 (水) 00:34:01};

#comment