HTMLにてテーブルに登録した情報を新規のものから５つ抽出して表示したい。

前提・実現したいこと

現在、jQueryを用いたToDoチェックリストのWebアプリ作成を行っております。
ToDoはテーブルに追加され、
要素は「タスク名」・「期限」・「優先度」・「備考欄」の４つで構成されてます。
タスク名と備考欄はテキストボックスから登録し、
優先度はラジオボタンで　高・中・低の3段階から選んだものを登録、
期限はdatepickerを用いて登録します。

登録したToDoはlocalStorageに保存され、
テーブルへの出力もlocalStorageから出力されます。

理想としては、ToDoは登録画面から登録され、
登録されたToDoは新しい順から５つテーブルに表示されることを
理想としています。

ソースコードはトップ画面・登録フォームのHTMLと、
登録フォームについてのjsです。

発生している問題

トップ画面にて登録したToDoを新着順に5つ表示するようにしたいのですが、うまくいきません。
登録したタスクの表示は出来ているのですが、
新着のタスクのみを表示されるのでなく、登録されたもの全てが
表示される状態です。

該当のソースコード

html
1//Top画面
2<!DOCTYPE html>
3<html lang="jp">
4  <head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="css/style.css">
7    <title>ToDoリスト</title>
8    <h1 class="title">トップ</h1>
9    
10    <script src="js/jquery.min.js"></script>
11    <link rel="stylesheet" href="css/jquery-ui.min.css">
12    <script src="js/jquery-ui.min.js"></script>
13    <script src="js/underscore-min.js"></script>
14    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>  
15    
16</head>
17  <body>
18    <form>
19      <h2>現在のTodoリスト</h2>
20      <table id ="toptable" class="tablesorter" border="1">
21        <thead>
22        <tr>　
23          <th>やるべきこと</th>
24          <th>期限</th>
25          <th>優先度</th>
26          <th>備考</th>
27          <th>-</th>
28        </tr>
29      </thead>
30      <tbody>
31      </tbody>
32        </table>
33
34      
35<a href="./touroku.html"><button type="button" id="enter">タスクを登録する</button></a>
36
37<a href="./kakunin.html"><button type="button" id ="look" >タスクの確認</button></a>
38
39    </form>
40    <div id="wrap"></div>
41    <div id="mini-calendar"></div>
42    <script src="./js/jquery.minicalendar.js"></script>
43    <script src="./js/mini.js"></script>
44    <script src="./js/top.js"></script>
45    <script src="./js/touroku.js"></script>
46    <script src="./js/tablesorter.js"></script>
47  </body>
48</html>

html
1//登録画面
2<!DOCTYPE html>
3<html lang="jp">
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="css/style.css">
7    <title>ka</title>
8    <h1 class="title">タスクの登録</h1>
9    <script src="js/jquery.min.js"></script>
10    <link rel="stylesheet" href="css/jquery-ui.min.css">
11    <script src="js/jquery-ui.min.js"></script>
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
13</head>
14  <body>
15    <form>
16      <p> <span class="example1">タスク内容</span></p>
17         <h1><input type="text" class="ent1" id="joint"></h1>
18         
19         <p> <span class="example1">期限</span></p>
20         <h1><input type="text" class="ent2" id="datepicker"></h1>
21         <div id="radio">
22         <p> <span class="example1">優先度</span></p>
23          <input type="radio" class="radio1" name="q2" value="高" checked>  <span class="example2">高</span>
24          <input type="radio" class="radio1" name="q2" value="中">  <span class="example2">中</span>
25          <input type="radio" class="radio1" name="q2" value="低">  <span class="example2">低</span>
26      </div>
27          <p> <span class="example1">備考</span></p>
28          <h1><input type="text" class="ent3" id="joint2"></h1>
29                  <button  id="jointtask" class="jointtask" value="追加">追加</button>        
30         <h2>タスク一覧</h2>
31        <table class="tablesorter" id ="toptable" border="">
32          <thead>
33            <tr>
34              <th>やるべきこと</th>
35              <th>期限</th>
36              <th>優先度</th>
37              <th>備考</th>
38              <th>-</th>
39            </tr>
40          </thead>
41          <tbody>
42          </tbody>
43          </table>
44
45    <a href="./top.html"><button type="button">トップに戻る</button></a>
46    <button id="save" class="save" value="保存">保存</button>    
47    </form>
48    <script src="./js/touroku.js"></script>
49    <script src="./js/top.js"></script>
50    <script src="./js/tablesorter.js"></script>
51  </body>
52</html>

js
1function getData(){
2    joint = $('#joint').val();
3    datepicker = $('#datepicker').val();
4    radio = $('input[name=q2]:checked').val()
5    joint2 = $('#joint2').val();
6
7}
8$(function(){
9    $('#jointtask').click(function(){
10        getData();
11        var data = '<tr><td><div class="slide">' + joint + '</div></td><td><div class="slide datepicker">' + datepicker + '</div></td><td><div class="slide radio">' + radio + '</div></td><td><div class="slide joint2">' + joint2 + '</div></td><td><div class="slide joint2">' + '<input class="btnDelete" type="button" value="削除" onclick="btnDelete;" />' + '</div></td></tr>';
12        localStorage.setItem(Data,data);
13        $('tbody').prepend(data);
14    });
15})
16
17$(window).on('load', function(){
18    var table =  0;
19    for(Data in localStorage){
20        table =  localStorage.getItem(Data);
21        $('tbody').prepend(table);
22    }
23});
24
25$('.btnDelete').on("click", function() {
26    $(this).parent().parent().remove();
27   });
28

試したこと

localstorageのデータをテーブルに出力する際、for文を使っているので、
for文に変数を追加したが、動作しなかった。

補足情報（FW/ツールのバージョンなど）

コード記述はVisual Studio Code 1.48.0を利用。
WebブラウザはChrome。

miyabi_pudding

2020/08/17 09:29

サーバーサイドのデータベースは使用しないのでしょうか？ localStrageだと、実装に限界があると思うので、せめて、IndexedDB（ブラウザ上データベース）を使うべきかと思うのですが・・・。

NokoKabu

2020/08/17 13:02

質問ありがとうございます。個人的な演習がてらに作っているので、本格的な運用を考えてなかったために localStrageでの実装にしました。

行動規範の内容に同意します

回答1件

ご質問からは、「新規」を判断する「登録日時（タイムスタンプ）」の項目がありません。
ですので、本来は「設計を見直す」必要があります。
ここでは、「期限の迫った順に５つ抽出する」方法の要となる処理を例示して回答とさせていただきます。

コンピュータへの電子指示を以下のように分けて考えます

No	内容	メモ
1.	UI	HTML+CSSで表示（必要に応じて更新）
2.	処理	DOM操作（UI読み取り/変更） <=> 配列（並替/抽出） <=> 保存用JSON
3.	保存	localStorage

表にまとめると、1. 3. は直接やり取りできない事が分かりますので、2. の操作を更に細かく分けます。

登録した情報を新規のものから５つ抽出

本題は、上表 2. 行目の 配列（並替/抽出） が主要な内容と思います
（フォームからの読み取って localStorage に保存/localStorageから読み出してリスト表示する方法は割愛します）。

登録された情報を配列（samples）にした後は、以下のように処理できそうです。

javascript
1// 優先度を数値で扱うための定数
2const
3  PRIORITY_LOW = 0,
4  PRIORITY_NORMAL = 1,
5  PRIORITY_HI = 2,
6  // 優先度ラベル表示用の文字列を取得
7  getPriority = priority => ["低い","普通","高い"][priority]
8;
9
10// 登録されている情報（６件登録済みとする）
11let samples = [
12  { name:"task1", note:"note1", priority:PRIORITY_LOW,
13    expire: new Date("2020-08-20T10:00:00Z")
14  },
15  { name:"task2", note:"note2", priority:PRIORITY_LOW,
16    expire: new Date("2020-08-22T10:00:00Z")
17  },
18  { name:"task2", note:"note2", priority:PRIORITY_NORMAL,
19    expire: new Date("2020-08-19T18:00:00Z")
20  },
21  { name:"task3", note:"note3", priority:PRIORITY_NORMAL,
22    expire: new Date("2020-08-19T17:00:00Z")
23  },
24  { name:"task4", note:"note4", priority:PRIORITY_HI,
25    expire: new Date("2020-08-19T10:00:00Z")
26  },
27  { name:"task5", note:"note5", priority:PRIORITY_LOW,
28    expire: new Date("2020-08-24T10:00:00Z")
29  },
30  { name:"task6", note:"note6", priority:PRIORITY_LOW,
31    expire: new Date("2020-08-23T10:00:00Z")
32  }
33];
34
35// 並び替え条件 Array#sort() に渡す
36let sorters = {
37  byDeadline(a,b){
38    return a.expire-b.expire
39  },
40  byPriority(a,b){
41    return b.priority - a.priority
42  }
43};
44// 抽出条件 Array#filter() に渡す（固有のフィルタ関数を得る：高階関数）
45let filters = {
46  byCount(n) {
47    return (e,i) => i<n
48  },
49  byPriority(p) {
50    return (e,i) => e.priority == p
51  }
52};
53
54let rslt = samples
55  .sort( sorters.byDeadline ) // 期限が迫った順に並び替える
56  .filter( (e,i) => {
57     // 期限が迫った順に５つまで
58     return filters.byCount(5)(e,i)
59     // 優先度が「高い」情報を５つまで
60     //return filters.byCount(5)(e,i) && filters.byPriority( PRIORITY_HI )(e,i);
61  });
62console.log( rslt );