WordPressのプラグイン「TablePress」の使い方の備忘録。デフォルトでは検索ボックスに入力例の表示はありませんが、これを表示する方法です。JavaScriptを使用して、画面の読込の際に表示するようにしています。
次のコードを<header>や<body>内に記述します。「#tablepress-2_filter」の数字部分はTablePressの「テーブルID」にして、「自治体名を入力」の部分は検索ボックスに表示したい文字列を入力します。
<script>
window.onload = function () {
let iptBox = document.querySelector('#tablepress-2_filter').querySelector('input');
iptBox.placeholder = '自治体名を入力';
}
</script>| 自治体団体コード | 自治体名 | ふりがな | 区役所所在地 | 人口 | 面積㎢ |
|---|---|---|---|---|---|
| 131016 | 千代田区 | ちよだく | 千代田区九段南1-2-1 | 66,687 | 11.66 |
| 131024 | 中央区 | ちゅうおうく | 中央区築地1-1-1 | 170,475 | 10.21 |
| 131032 | 港区 | みなとく | 港区芝公園1-5-25 | 257,776 | 20.37 |
| 131041 | 新宿区 | しんじゅくく | 新宿区歌舞伎町1-4-1 | 346,028 | 18.22 |
| 131059 | 文京区 | ぶんきょうく | 文京区春日1-16-21 | 239,624 | 11.29 |
| 131067 | 台東区 | たいとうく | 台東区東上野4-5-6 | 212,032 | 10.11 |
| 131075 | 墨田区 | すみだく | 墨田区吾妻橋1-23-20 | 272,158 | 13.77 |
| 131083 | 江東区 | こうとうく | 江東区東陽4-11-28 | 523,631 | 43.01 |
| 131091 | 品川区 | しながわく | 品川区広町2-1-36 | 418,658 | 22.84 |
| 131105 | 目黒区 | めぐろく | 目黒区上目黒2-19-15 | 284,282 | 14.67 |
| 131113 | 大田区 | おおたく | 大田区蒲田5-13-14 | 740,312 | 61.86 |
| 131121 | 世田谷区 | せたがやく | 世田谷区世田谷4-21-27 | 937,615 | 58.05 |
| 131130 | 渋谷区 | しぶやく | 渋谷区宇田川町1-1 | 241,998 | 15.11 |
| 131148 | 中野区 | なかのく | 中野区中野4-8-1 | 341,843 | 15.59 |
| 131156 | 杉並区 | すぎなみく | 杉並区阿佐谷南1-15-1 | 586,102 | 34.06 |
| 131164 | 豊島区 | としまく | 豊島区東池袋1-18-1 | 297,751 | 13.01 |
| 131172 | 北区 | きたく | 北区王子本町1-15-22 | 352,925 | 20.61 |
| 131181 | 荒川区 | あらかわく | 荒川区荒川2-2-3 | 216,588 | 10.16 |
| 131199 | 板橋区 | いたばしく | 板橋区板橋2-66-1 | 580,746 | 32.22 |
| 131202 | 練馬区 | ねりまく | 練馬区豊玉北6-12-1 | 750,075 | 48.08 |
| 131211 | 足立区 | あだちく | 足立区中央本町1-17-1 | 692,322 | 53.25 |
| 131229 | 葛飾区 | かつしかく | 葛飾区立石5-13-1 | 450,868 | 34.80 |
| 131237 | 江戸川区 | えどがわく | 江戸川区中央1-4-1 | 690,645 | 49.9 |