急いでいます！

JavaScriptでリンクなどなく遷移した瞬間から作成したテーブルの当日のカラムを表示したい

解決済

質問者：ガウン
質問日時：2019/03/11 17:28
回答数：2件

こんにちは
助けてください！

<table>タグを使って表を作成しました。
1ヶ月分の日程が入っている表なのですが、
縦に長いため人画面に収まりません。

そのためスクロールの機能を使って
遷移した瞬間から当日のカラムのところを自動で表示したいのですが、調べてもなかなか出てこなくて困っています。

どなたか教えてください。
よろしくお願いします。

通報する

この質問は特に30代・男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： rabbit_9999
回答日時：2019/03/11 17:39

「a name」でラベルをつけておいて、そこに遷移するのではダメですか？

テーブル
<table>
<tr>
<td><a name="day01">1日</td>
<td>打ち合わせ</td>
</tr>
<tr>
<td><a name="day02">2日</td>
<td>出張</td>
</tr>
<tr>
<td><a name="day03">3日</td>
<td>事務作業</td>
</tr>
</table>

遷移先のURL（1日の場合）
xxx.htm#day01

- 1
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2019/03/13 10:36

こんにちは

ブラウザをスクロールするメソッドの
　window.scroll()　や　Element.scrollIntoView()
などを利用すれば、表示位置を制御することが可能です。
https://developer.mozilla.org/ja/docs/Web/API/Wi …
https://developer.mozilla.org/ja/docs/Web/API/Wi …

質問者様の想定する表形式がどのようなものなのかまったく不明なので、以下は方法としてのご参考までの一例です。
（似たような方法あるいは応用等で、フィットしたものにすることができるだろうという意味です）

1日の内容がtableの1行に表示されているものと仮定して、『今日の日にちがn日ならば、n番目の行までスクロールする』という内容のスクリプトです。
（表の下の方の行が対象となった場合は、スクロール可能なところまでで、必ずしも最上部まで移動するようにはスクロールしません）

※ スクロールを発生させるため、全体の表示高さを狭め、１行の高さを高めに設定してあります。
※ 途中の日付を省略してありますが、tableの行数は月の日付分あるものと想定。
※ 表内の日付表示等を検索するものではありません。
　あくまでも「n番目の行を表示」という単純な内容のものです。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.plan>div { height:50vh; overflow-y:scroll; }
.plan>table { height:2em; background-color:#DFE; }
.plan table { width:90vw; border-collapse:collapse; }
.plan div table { margin-top:-1px; }
.plan div tr { height:6em; }
.plan th, .plan td { border:1px solid black; }
.plan th:first-child,
.plan td:first-child { width:5em; }
</style>

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(){
let t = document.querySelectorAll(".plan div table tr");
t[Math.min(new Date().getDate(), t.length)-1].scrollIntoView();
});
</script>

</head>
<body>
<div class="plan">
<table>
<tr><th>日</th><th>予定</th></tr>
</table>
<div>
<table>
<tr><td>1</td><td>1日の予定</td></tr>
<tr><td>2</td><td>2日の予定</td></tr>
<tr><td>3</td><td>3日の予定</td></tr>
<tr><td>4</td><td>4日の予定</td></tr>
<tr><td>5</td><td>5日の予定</td></tr>
<tr><td>6</td><td>6日の予定</td></tr>
<tr><td>7</td><td>7日の予定</td></tr>
<tr><td>8</td><td>8日の予定</td></tr>
<tr><td>9</td><td>9日の予定</td></tr>
<tr><td>10</td><td>10日の予定</td></tr>
<tr><td>11</td><td>11日の予定</td></tr>
<tr><td>12</td><td>12日の予定</td></tr>
<tr><td>13</td><td>13日の予定</td></tr>
<tr><td>14</td><td>14日の予定</td></tr>
<tr><td>15</td><td>15日の予定</td></tr>
<tr><td>・・・</td><td>・・・(途中略)</td></tr>
<tr><td>31</td><td>31日の予定</td></tr>
</table>
</div>
</div>