プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

JavaScriptでテーブル内？に矢印をつけて列の入れ替え【コードあり】

解決済

  • 質問者：まろたそ
  • 質問日時：
  • 回答数：4件

はじめまして。最近HTMLとCSSとJavascriptを使用し、ネットや本を参考にしながら簡単なブラウザ上のメモアプリを作っているのですが、メモを追加して追加されたメモの横に↑と↓の矢印をつけてクリックした分だけ上下入れ替えするようなものを作りたいのですがなかなか分からずなので教えてください。画像の赤字のような感じです・・・。それともう一つ、メモの隣に記入した時間が表示されるよう(画像:水色の文字)にしたいのですが本をみてもなかなか反映されません。こちらも出来ればお応えお願いいたします。


【コード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="memo stylesheet.css">
<title>memo</title>
<body onload="load()" >
<div><form submit="return false;">
<header><input type="text" id="newMemo">
<input type="button" id="addBtn" value="追加" onclick="addMemo()"></header></form>
<form>
<p><button id="saveBtn" onclick="save()">保存</button>
<button id="clearBtn" onclick="clearAllMemo()">すべて削除</button></p>
</form>
<div id="disp"></div>
</body>

<script>
var ls = window.localStorage;
// ストレージに保存する際のキー識別用接頭辞
var AppName = 'MemoAppVer1.';
// 入力値を画面で一時的に保存するための配列
var temp = new Array(0);

// メモの追加
function addMemo() {
if(temp.length == 10) {
alert('保存できるメモの上限は10件です。');
return;
}
var v = $('newMemo').value;
if(v == '' || v == null) {
alert('メモが入力されていません。');
return;
}
temp[temp.length] = v;
display();
}


// メモ一覧の表示
function display() {
$('newMemo').value = '';
var s = '<table class="example">';
for(var i = 0; i < temp.length; i++) {
var btn = '<input type="image" ' +
' src="gomibako.png"　id onclick="removeMemo(' + i + ')">';

s += '<tr class="table"><td class="table">' +
temp[i] + '</td><td class="table">' + btn +
'</td><tr>';
}
s += '</table>';
$('disp').innerHTML = s;
}

// メモを1件削除
function removeMemo(no) {
temp.splice(no, 1);
display();
}

// 入力内容をLocalStorageに保存
function save() {
// 以前に登録されているキーと値を削除
for(var i = 0; i < 10; i++) {
if(ls[AppName + 'dataId' + i]) {
ls.removeItem(AppName + 'dataId' + i);
}
}
var len = temp.length;
// Storageに保存。キーは[アプリ名 + データID]という形式にする
for(var i = 0; i < len; i++) {
ls[AppName + 'dataId' + i] = temp[i];
}
display();
}

// 起動時に呼出される
function load() {
for(var i = 0; i < 10; i++) {
if(ls[AppName + 'dataId' + i]) {
temp[i] = ls[AppName + 'dataId' + i];
}
}
display();
}

// ストレージの内容をすべて削除する
function clearAllMemo() {
var ans = confirm('メモをすべて削除しますか？');
if(ans) {
temp.length = 0;
save();
}
}

// IDの取得
function $(id) {
return document.getElementById(id);
}
</script>
</html>


【CSSコード】

body{
text-align:center;
margin-left:auto;
margin-right:auto;
width: 370px;/*全体の幅*/
min-height:450px;
font-size: 20px;/*文字サイズ*/
border: dashed 1px #666666;/*枠の色*/
padding: 1px;
}
header{/*タイトル部分の設定*/
color: #FFFFFF;
background: #00bfff;/*背景色*/
font-size: 120%;
font-family: "Lucida Sans Unicode", sans-serif;
text-align: left;/*左寄せ*/
margin: 0;
padding: 3px 0.5em 2px 0.5em;
text-align: right;
}
p{/*内容部分*/
text-align:right;
margin: 0;
padding: 0.2em;
}
h2{
padding: 1em;/*テキスト部分の余白*/
margin: 0;
}
/* --- 表全体 --- */
table.example {
text-align:left;
width: 280px; /* 表の幅 */
border: 1px #c0c0c0 none; /* 大枠の境界線 */
border-collapse: collapse;
font-size: 80%;
margin: 20px 60px;
}

table.example tbody td {
height: 30px;
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}

「JavaScriptでテーブル内？に矢印」の質問画像

質問者からの補足コメント

  • 旧来…ですか？すみませんそれがなんなのかすらわからず…。これが求めてくださってる答えかどうかわからないですが、上に貼ったコードをhtmlで保存し、下のコードをcssで保存し、同じファイルに入れて上のhtmlファイルをウェブブラウザで開いております。

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/11/30 14:45
    通報する
通報する

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

質問の本文を隠す

A 回答 (4件)

参考程度に

No.3ベストアンサー

  • 回答者： gao57830
  • 回答日時：

// メモを一つ上へ


function upMemo(no) {
　var tmp1 = temp[no];
　var ntmp = new Array();
　for(var i = 0; i < temp.length; i++) {
　　if(i == no - 1) {
　　　ntmp.push(tmp1);
　　　ntmp.push(temp[i]);
　　} else if(i != no) {
　　　ntmp.push(temp[i]);
　　}
　}
　temp = ntmp;
　display();
}

// メモを一つ下へ
function dnMemo(no) {
　var tmp1 = temp[no];
　var ntmp = new Array();
　for(var i = 0; i < temp.length; i++) {
　　if(i == no + 1) {
　　　ntmp.push(temp[i]);
　　　ntmp.push(tmp1);
　　} else if(i != no) {
　　　ntmp.push(temp[i]);
　　}
　}
　temp = ntmp;
　display();
}

// メモ一覧の表示
function display() {
　$('newMemo').value = '';
　var s = '<table class="example">';
　for(var i = 0; i < temp.length; i++) {
　　var up = '';
　　if(i != 0) {
　　　up = '<input type="button" value="↑" onclick="upMemo(' + i + ')">';
　　}
　　var dn = '';
　　if(i != temp.length - 1) {
　　　dn = '<input type="button" value="↓" onclick="dnMemo(' + i + ')">';
　　}
　　var btn = '<input type="image" ' +
　　　　　　　' src="gomibako.png"　id onclick="removeMemo(' + i + ')">';

　　s += '<tr class="table">' +
　　　　'<td class="table">' + temp[i] + '</td>' +
　　　　'<td class="table">' + up + '</td>' +
　　　　'<td class="table">' + dn + '</td>' +
　　　　'<td class="table">' + btn + '</td>' +
　　　　'<tr>';
　}
　s += '</table>';
　$('disp').innerHTML = s;
}


---------------------------------------------
//メモを一つ上へ
//メモを一つ下へ
を追加して、
// メモ一覧の表示
を差し替えてみてください。
「JavaScriptでテーブル内？に矢印」の回答画像3
    • good
    • 0
    • 件
通報する
この回答へのお礼

わあああ二回もコメントありがとうございます！まず書いてくださったものをコピー＆ペーストで貼り付け動かしてみたら私のやりたかったことがそのままでした・・・！ご丁寧に画像まで添付してくださってありがとうございます！これからひとつひとつどんな仕組みになってるか見ていこうと思います！本当にありがとうございました！

通報する
お礼日時：2015/12/01 16:07

参考程度に

No.4

  • 回答者： gao57830
  • 回答日時：

// メモの追加


function addMemo() {
if(temp.length == 10) {
alert('保存できるメモの上限は10件です。');
return;
}
var v = $('newMemo').value;
if(v == '' || v == null) {
alert('メモが入力されていません。');
return;
}
var dd = new Date();
var mm = dd.getMonth() + 1;
var dt = dd.getDate();
var hh = dd.getHours();
var mn = dd.getMinutes();
if(mm < 10){ mm = "0" + mm; }
if(dt < 10){ dt = "0" + dt; }
if(hh < 10){ hh = "0" + hh; }
if(mn < 10){ mn = "0" + mn; }
temp[temp.length] = v + '　' + mm + '月' + dt + '日' + hh + '時' + mn + '分';
display();
}


-----------
日付もあったのですね。
// メモの追加
を差し替えてください。
「JavaScriptでテーブル内？に矢印」の回答画像4
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは。


使ったことがありませんが、保存にはウェブストレージをご利用なさっているようですね。


＞メモアプリを作っているのですが～～
ここまで作られたのならあとは簡単だと思いますが、ゴミ箱の処理と同じ要領でできるのではないでしょうか？

表示はdisp関数で毎回データからを全部を作成し直すようになさっているので、修正はしやすいと思います。
例えば、dispの中で
　'<span class="arrow" onclick="hoge(' + i + ')">↑</span>'
のようなHTMLをボタンの前に付け加えてあげれば、「↑」が表示されて、クリック時には関数hoge(n)が呼び出されるようになります。
hogeの引数にはメモの番号（=tempのインデックスと同じ）が渡されますので、それに応じてtempのデータを入れ替えてあげれば良いことになりますね。（入れ替えるところが、削除とちょっと違う処理になるだけです）

「↓」も同様ですが、↑も↓も基準となるインデックスを一つずらして考えれば、「入れ替える」という同じ処理として考えることができますので、インデックスをずらす処理だけの違いなので同じ処理関数で処理できるものと思います。
入れ替え処理が終わったところで、他の処理と同様にdisp()を呼び出せば、新しい内容で表示されることになるでしょう。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

あれ？旧来のHTMLでデータの保存できましたっけ？


サーバーサイドでプログラムを動かすのではないのですよね？
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報