質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • jQuery

    7996questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4985questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    1092questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

jQueryで選択した行だけ削除、localStorageの処理

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 221

rinneP2525

score 6

【やりたいこと】

  1. 1. "kettei"をタップすると"rslt"に数値が出力され、localStorageにデータが保存される
    2."day"と"money"に数値を入力し、"kettei1"をタップするとtableに列と"day""money"が出力され、localStorageにデータが保存される
    3.tableの下に"goukei"欄を作成し、tableに出力された金額の合計を「合計"goukei"円」と表示する
    4."rslt"-"goukei"="result"と出力し、localStorageにデータが保存される
  2. 1. "remove"を押すと当該の行だけ削除

【困っていること】

  1. localStrageにデータが保存される仕組みはなんとなくわかったのですが、今のデータを保存、出力する具体的なコードがわかりません。
    参考になるサイトや具体的なコードを教えていただければ幸いです…。
    jQueryには保存する方法だけ記載してそのまま手が動かなくなりました。
  2. 現状のコードでは増えた行全部が消えてしまいます…

【参考コード】

 </head>
  <body>
    <header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span>menu</span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <form id="settei" oninput="rslt.value = Number(settei.value);">
        <p>上限設定</p>
        <p><input type="number" name="settei"></p>
        </form>
        <input type="button" value="決定" class="ketei" onclick="nav-close">
      </div>
  </div>
</header>
  <div class="main"> 
    <div class="jougen">
      <p>課金上限</p>
      <p><output name="rslt" form="settei">0</output></p>
    </div>
      <div class="honbun1">
       <p>入力</p>
      <div style="display:inline-flex">
         <form id="f1">
         <div class="moji">
         <input type="date" name="day" id="day" class="day">
           <input type="number" class="money" name="money" id="money"><input type="submit" value="入力" class="kettei1"></div>
        </form>
        </div>
    </div>
    <div class="nokori">
      <p>今月の残り課金額</p>
      <p><output name="result" >0</output></p>
    </div>
    <br>
<form id="f2">
<p>履歴</p>
<div class="rireki">
<table id="t1" border="1">
<thead>
<tr>
<th width="30%">日付</th>
<th width="50%">金額</th>
<th width="20%">削除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
    <input type="reset" value="クリア">
    </div>
</html>
// This is a JavaScript file
$(function () {

  /* ここにjQueryのコードを記述 */
  /* 履歴表示 */
  $('#f1').on('submit', function (e) {
    e.preventDefault();
    var v_day = $("#day").val();
    var v_money = $("#money").val();
    if (v_day !== "" && v_money !== "") {
      $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
      $("#day,#money").val("");
    }
  });

 /* 削除ボタン作動 */
  $('#f2').on('remove' , function (e) {
    e.preventDefault();
     $(this).parents(tr).remove();
  })

 /* 配列をJSON 形式に変換して格納 */
    localStorage.setItem("divData", JSON.stringify(data));



});

追記:簡単な「課金上限」を保存するところからやってみました。
localstrageには保存されるのですがページを更新すると「課金上限」の金額が0円に戻ってしまいます。
なぜでしょうか…?

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <title>メイン</title>

  </head>
  <body>
    <header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span>menu</span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <form id="settei" oninput="rslt.value = Number(settei.value);">
        <p>上限設定</p>
        <p><input type="number" id="kakin"></p>
        </form>
        <input type="button" value="決定" class="ketei" onclick="nav-close" id="kettei">
      </div>
  </div>
</header>
  <form id="f3">
  <div class="main">
    <div class="jougen">
      <p>課金上限</p>
      <p><output id="rslt" form="settei" class="jogen">0</output></p>
    </div>
    </form>
      <div class="honbun1">
       <p>入力</p>
      <div style="display:inline-flex">
         <form id="f1">
         <div class="moji">
         <input type="date" name="day" id="day" class="day">
           <input type="number" class="money" name="money" id="money"><input type="submit" value="入力" class="kettei1"></div>
        </form>
        </div>
    </div>
    <div class="nokori">
      <p>今月の残り課金額</p>
      <p><output name="result" >0</output></p>
    </div>
    <br>
<form id="f2">
<p>履歴</p>
<div class="rireki">
<table id="t1" border="1">
<thead>
<tr>
<th width="30%">日付</th>
<th width="50%">金額</th>
<th width="20%">削除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
    <input type="reset" value="クリア">
    </div>
</html>
/// This is a JavaScript file
$(function () {

  /* ここにjQueryのコードを記述 */
  /* 履歴表示 */
  $('#f1').on('submit', function (e) {
    e.preventDefault();
    var v_day = $("#day").val();
    var v_money = $("#money").val();
    if (v_day !== "" && v_money !== "") {
      $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
      $("#day,#money").val("");}
  });

 /* 削除ボタン作動 */
  $('#f2').on('remove' , function (e) {
    e.preventDefault();
     $(this).parents(tr).remove();
  })

/* セッションストレージ設定 */
  var storage = localStorage;

/* 課金上限 保存 */
  $("#kettei").click(function() {
        storage.setItem("jogen", $("#kakin").val());

/* 課金上限 表示 */
 var value = storage.getItem("jogen");
 $("#rslt").text(value);
});


/* 終了タグ */
});


追記:JSONに変更して保存するところまでうまくいったと思うのですが…
保存したデータを表示すると{"data1":"#day","data2":"#money"}と表示されました。
これをデータ形式で表示する方法はありますでしょうか…?

/* 履歴を保存 */
$('#f1').on('submit', function (){
  var datalist = {
     data1: "#day",
     data2: "#money"
  }
  storage.setItem("datalist",JSON.stringify(datalist));

/* 履歴を取得 */
var str = localStorage.getItem("datalist");
var obj = JSON.parse(str);
})

/* 履歴を表示 */
$(document).ready( function(){
  var value = storage.getItem("datalist");
  $("#t1 tbody").text(value);
});

追記:履歴部分のコードを自分なりに書いてみたのですが、何かが間違っているらしく全く動きません…
間違っている箇所があればご指摘いただけたら幸いです…。

/* 履歴を保存 */
$('#f1').on('submit', function (){
  var datalist = {
     data1: $("#day").val(),
     data2: $("#money").val()
  }
  storage.setItem("datalist",JSON.stringify(datalist));

/* 履歴を取得 */
var str = localStorage.getItem("datalist");
var obj = JSON.parse(str);
})

/* 履歴を表示 */
$(document).ready( function(){
       // 登録されているkey, valueを順に取得して表示
        var tr = $("<tr></tr>");
        var td1 = $("<td></td>");
        var td2 = $("<td></td>");
        var td3 = $("<td></td>");
        $("list").after(tr);
        tr.append(td1).append(td2);
        td1.html(ls.getItem(.data1));
        td2.html(ls.getItem(.data2));
        td3.html('<button class="remove">-</button>');
     })


4/10追記
localstrageにデータが保存されるようになった、テーブルもページ更新したら出るようになったのですが、テーブルの中にデータがはいりません。
ここのコードが間違っているだろう、というのはわかるのですが色々やってみても解消しません。
どうしたら良いでしょうか…?
ちなみにlocalstrageの名前はstrageにしています。

/* 履歴を保存 */
$('#f1').on('submit', function (){
  var obj = {
     data1: $("#day").val(),
     data2: $("#money").val()
  }
  storage.setItem("datalist",JSON.stringify(obj));

/* 履歴を取得 */
var str = storage.getItem("datalist");
var obj = JSON.parse(str);
})


/* 履歴を表示 */
$(document).ready( function(){
       /* 登録されているkey, valueを順に取得して表示 */
        var tr = $("<tr></tr>");
        var td1 = $("<td></td>");
        var td2 = $("<td></td>");
        var td3 = $("<td></td>");
        $("#list").after(tr);
        tr.append(td1).append(td2).append(td3);
        $("#td1").strage.getItem('data1');
        $("#td2").strage.getItem('data2');
        $("#td3").html('<button class="remove">-</button>')
     })

4/11 追記
思い切ってjQueryを書き直してみました。
選択した行だけ削除はできるようになったのですが、1回しか削除されないところと、ページを更新した時に履歴が表示されず困っています。
何か手立てはありますでしょうか…?

// This is a JavaScript file
$(function () {

  /* ここにjQueryのコードを記述 */

/* ローカルストレージ設定 */
  var storage = localStorage;



$('#f1').on('submit', function (e){
  e.preventDefault()

/* 履歴を保存 */
var key = $("#day").val();
var value = $("#money").val();

  /* key,valueに値が入っているかチェック */
  if (key && value) {
    storage.setItem(key, value);
  }

/* いったん中身を空にする */
$("#list").empty();

/* localStorageすべての情報の取得 */
for (var i=0; i < storage.length; i++){
  var _key = storage.key(i);


  /* 登録されているkey, valueを順に取得して表示 */
   var tr = $("<tr></tr>");
   var td1 = $("<td></td>");
   var td2 = $("<td></td>");
   $("#list").append(tr);
   tr.append(td1).append(td2).append($('<td>').html('<input type="button" value="-" id="remove">'))
   td1.html(_key);
   td2.html(storage.getItem(_key));
    }
});

/* 選択した列のデータを削除 */
   $(document).on( "click" , "#remove" , function(){
     var key = $("#day").val();
     storage.removeItem(key);
     key = "";
  window.location.reload();
  });

/*  全てのデータを削除 */
  $("#clear").click(function() {
 storage.clear();
  window.location.reload();
});

/* 課金上限 保存 */
  $("#kettei").click(function() {
        storage.setItem("jogen", $("#kakin").val());

/* 課金上限 表示 */
 var value = storage.getItem("jogen");
 $("#rslt").text(value);
});

/* リロードした時のに課金上限・履歴を表示*/
$(document).ready( function(){
  var value = storage.getItem("jogen");
  $("#rslt").text(value);
  var key = $("#day").val();
  var value = $("#money").val();
  storage.getItem(key,value)
});



/* 終了タグ */
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/03/31 12:11 編集

    回答をどの程度理解して解決とされたのでしょうか。
    https://teratail.com/help/question-tips#questionTips4-2
    ベストアンサーに選んだ回答にコメントつけてください。

    キャンセル

  • rinneP2525

    2019/03/31 17:40

    すみませんベストアンサーを付けたつもりがなかったです…
    スマホで見ていた際に間違って押してしまったんだと思います。もうしわけありません。

    キャンセル

  • mts10806

    2019/03/31 17:44

    了解です

    キャンセル

回答 2

+2

参考になるサイトや具体的なコードを教えていただければ幸いです…。

まだ使ったことがないかもしれませんが、Google という会社が検索サービスを提供していて、ある程度のキーワードを入れると関連しそうなWebページを教えてくれます。

localstorage で検索すると、例えば下記のような使用例まで書かれたページが見つかるので、実際にコードをまねしながら書いてみましょう。

【WebStorage API(LocalStorage)を使ってみた - Qiita】
https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

【【サンプル付き】Local Storageとは?使い方を詳しく解説 | webliker】
https://webliker.info/how-to-use-localstrage/

【ブラウザにデータを保存するlocalStorage(ローカルストレージ)の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/local-storage-01


現状のコードでは増えた行全部が消えてしまいます… 

編集の内容を保存していないからです。また、保存した物を取り出すコードが書かれていません。


一日考えても全くわかりません

わからないことは調べましょう。Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で(入門から中級くらいまで)何冊か本を買って読むと言う方法をお勧めします。


追記:

追記:簡単な「課金上限」を保存するところからやってみました。

保存した物をページが呼び出されたタイミングで取り出すコードが書かれていません。


追記:

保存したデータを表示すると{"data1":"#day","data2":"#money"}と表示されました。

下記部分は#dayという文字列を入れているだけなので、本当にそれを保存したかったのか考えましょう。そう書いても保存した時にinput要素に入っている内容は取得されないし、再利用できません。

  var datalist = {
     data1: "#day",
     data2: "#money"
  }
  var datalist = {
     data1: $("#day").val(),
     data2: $("#money").val()
  } // 書くならこう。

で、datalist の値からHTMLに反映させる方法は$('#t1 tbody').after/*省略*/で書いている方法とだいたい同じです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/09 14:53

    (2019/04/09 14:43の追記に対して)
    storageとかlsとか定義されていない物を使おうとしても動きませんよ。
    localStorageを利用する前に、配列にオブジェクトを入れて、それを取り出すコードを書いてみましょう。ステップを飛ばして勉強するより、1段1段少しずつ勉強しましょう。

    キャンセル

  • 2019/04/09 14:54 編集

    ありがとうございます!lsの部分をlocalStrageにしたら動きました!
    意味がわからず使っているものが多いので、一つずつ理解していこうと思います。

    キャンセル

  • 2019/04/10 18:14

    $("#td1").strage.getItem('data1');
    これで何が起こると思ったのでしょう。

    $("#td1")はもしかして直前の変数td1に入っているHTML要素が勝手に入ると思ったのでしょうか。
    ちなみに要素が取得できていたとしても、$("#td1").strageってjQueryオブジェクトに「無い」プロパティにアクセスしています。どこにも値を入れる処理がされていません。
    「要素を選択して、その中に値を入れる」という基礎部分を見直してください。

    下記方法で追加はできたのでは?ならその内容を置き換えることからはじめればよいのに。
    $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));

    あと、strage.getItem('data1')と書いても入れていない要素を取得できませんよね。datalistに入れてたのでは?
    ちなみにdatalistにはいるのは単一のobjを文字列化したものなので、複数要素を扱えません。

    キャンセル

  • 2019/04/10 18:29

    $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
    はいらないと思って消していました…これを弄ればよかったんですね。ありがとうございます…

    >ちなみにdatalistにはいるのは単一のobjを文字列化したものなので、複数要素を扱えません。
    ということは日付と金額二つのkeyを作成しなければいけないということで認識は間違っていないでしょうか?

    キャンセル

  • 2019/04/10 18:38

    配列の中にオブジェクトは入れられます。入門書を買って読んでください。
    今回試されているコードはゴールが遠すぎます。

    01. 変数と配列操作(配列に必要な物を追加、特定の値を削除)
    02. HTML操作(jQueryを用いた要素の作成/削除)
    03. HTML操作を変数を基に行う(配列の内容を順番にHTMLにしていく操作)
    04. イベント操作(クリックイベント時に配列に情報を追加/削除)
    05. localStorageにデータを格納/取り出し

    この順番くらいで処理の仕方を勉強しないとゴールに辿り付けません。
    今、手間取っておられるのは「01」の変数の部分です。

    キャンセル

  • 2019/04/10 18:49

    もうちょっとだと思っていたのに全然だったんですね…
    ありがとうございます

    キャンセル

  • 2019/04/10 20:46

    var v_day = obj.data1;
    var v_money = obj.data2;
    if (v_day !== "" && v_money !== "") {
    $('#t1 tbody').after($('<tr>').append($('<td>').html(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
    $("#day,#money").val("");
    }
    });
    でできました!ありがとうございます!

    キャンセル

  • 2019/04/11 20:22

    追記(04/11)に対して:
    localStorage使わずに1回やってからlocalStorageに挑戦しましょう。既に書いたとおり、ゴールの設定が間違っています。

    キャンセル

+1

保存したいデータが決まってるなlocalStorageの使い方通りに保存して取り出せば良いだけなので、まずコードを書きましょう。
保存、取得、削除の3つくらいしか主に覚えることはありませんし、調べればすぐです。
(それに、前の質問の回答にQiitaというサイトでMonacaでlocalstorage利用するという観点の文章がある記事のリンクを貼っています)

いきなり今やろうとしている本チャンコードに仕込もうとするのではなく、もっと簡単なミニマムコードから試して「できること、できないこと」が自分で理解するように進めらてはどうでしょうか。

  1. 固定値を保存、取得、削除する
  2. 入力された値を以下同文
  3. 複数の値を以下同文
  4. 配列を以下同文
  5. 本チャンコードへの適用方法を考える
    以下略

追記:
>これをデータ形式で表示する方法
「データ形式」というのはどういうことでしょうか。
単語を使うよりも望む結果を書いたほうが良いかと思います。
また、JSON.parse()の結果はオブジェクト、というかわかりやすく言うと連想配列なので、JavaScriptの連想配列として値を取り出して適宜使いましょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/08 12:38

    ありがとうございます。
    日付、金額が入ったテーブルをそのまま保存したいということでした。
    そしたら削除ボタンを押した際に削除したい列だけ削除できるのではないかと思って…
    連想配列のリンクありがとうございます。頑張ってみます。

    キャンセル

  • 2019/04/08 12:50

    テーブル自体を保存しようと思ったらhtmlを保存となるので「何行目の値」という形で紐づけて保存されたほうが扱いやすくなると思います(LocalStorageには容量上限があるので)

    キャンセル

  • 2019/04/08 14:43

    htmlの何行目のコードということですね、やってみます!ありがとうございます!

    キャンセル

  • 2019/04/08 14:50

    いや、ちょっと違うように思います。
    データベースをイメージできたら早いのですが、データの持ち方はレコードID(何行目)のどの項目の、という持ち方をします。それが何行もあるわけですね。
    連想配列も概念は同じです。
    例えば学校のクラスで、1学年だけとして、1組2組…がレコード。
    出席番号が項目名としましょう。
    すると、1組の1番は「赤木」さん、2組の1番は「浅井」さんとして、中身は違いますが「出席番号1番」という項目は変わりません。

    キャンセル

  • 2019/04/09 19:18

    色々調べてやっとわかりました…
    var datalist = {
    data1: $("#day").val(),
    data2: $("#money").val()
    }
    ここが連想配列なのですね。
    これをうまいことhtmlと合わせて紐づければいいのですね…まだ難しいですが頑張ります

    キャンセル

  • 2019/04/09 19:20

    はい。連想配列が使えるようになればやれることの幅が広がります。
    がんばってください。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7996questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4985questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    1092questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。