HTML文書にテキストで
--------------------------------------
3.文字C
4.文字D
2.文字B
6.文字F
1.文字A
5.文字E
--------------------------------------
とあったとします。これを↓の状態にしたいです。
--------------------------------------
文字A
文字B
文字C
文字D
文字E
文字F
--------------------------------------
(1.~6.の順にソートし、1.~6.を消す)
ソートするJavaScript、1.~6.を消すJavaScript、
どちらかでも構いません。
また、参考になりそうな情報だったら、
なんでも結構です。どなたかアドバイス頂けませんか?
ちなみに私自身のJavaScriptのレベルは、ほぼゼロです。
でも自分でいろいろ調べようと思っていますので
そのヒントを頂ければ嬉しいです。
どうぞよろしくお願いします。
No.6ベストアンサー
- 回答日時:
> 改行コードが無くなっているということですか?
Firefoxでは余計な<br>が先頭についています。
なお、これはIEでは発生しませんでした。(検証不足でした。)
>>この問題の原因とは異なりますが
勘違いしてましたが、まさにこれ(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。
> より良い方法をご教授して下さるとありがたいです。
地道にnodeValue中の\nを削除する。
\nだけのテキストノードは除外する。
と、なるでしょうか?もっといい方法があるのかもしれないけれど思いつきませんでした。
Javascriptに手をいれない方法として最後の
<br>
</div>
を
<br></div>
と改行しないようにするのが最も楽そうだけど。
話が飛躍してしまって質問者さんには失礼しています。
No.7
- 回答日時:
#6>Firefoxでは余計な<br>が先頭についています。
>(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。
確認しました。
対処の方法としては、やはり、
<br></div>
にするのが良さそう(というか楽)ですね。
ご教示ありがとうございました。
steel grayさんの回答はいつも参考になります。
勉強になりました、本当に感謝しております。
質問者さんのために、この件の簡単な解説をすると
<div id="data">
3.文字C<br>
4.文字D<br>
2.文字B<br>
6.文字F<br>
1.文字A<br>
5.文字E<br>
</div>
の部分が、FireFoxでは、プログラム的に
<div id="data">
childNodes[0],childNodes[1]
childNodes[2],childNodes[3]
childNodes[4],childNodes[5]
childNodes[6],childNodes[7]
childNodes[8],childNodes[9]
childNodes[10],childNodes[11]
childNodes[12]
</div>
childNodes[12]は"\n"
になっているということです。
つまり、FireFoxでは、childNodes[12]が(IEと比べて)余計に有って改行のみの(想定外の)データが1つ増えるので改行されてしまう。
"\n"<BR>の行が一行はいるということです。
IEでは、childNodes[12]はありません。
※偶数番目がデータの文字列で、記数番目が"<BR>"
IEでは"\n"は無視されるようですが、
FireFoxでは、
例えば、
childNodes[2]が"\n2番目の文字列"
になるようです。
どちらかというと、FireFoxの方が動作として正しいと思います。
対処としては、#6で言われるような感じになると思います。
*
あと、operaについては、残念ですが持ってませんので、動作確認ができません。申し訳ありません。<(_ _)>
詳しい解説をいただき、ありがとうございます。
これで、いろいろいじってみたいと思います。
BLUEPIXY様、steel_gray様、お二方にとても感謝しています。
どうもありがとうございました!
No.5
- 回答日時:
#4>結果が期待したものと違っている事がわかります。
ご指摘ありがとうございます。
できたら、もっとはっきりと言って貰ったほうが嬉しいです。
改行コードが無くなっているということですか?
>data[i/2]=old_el.childNodes[i].nodeValue;
が危うい感じなのは、一応理解しているつもりです。
できたら、より良い方法をご教授して下さるとありがたいです。
No.4
- 回答日時:
まず、質問者さんへの回答ではないことをお詫びします。
#3の回答でも少々問題があります。
onloadの最後にでも
alert(new_el.innerHTML)
を入れてみれば結果が期待したものと違っている事がわかります。
また、この問題の原因とは異なりますが
data[i/2]=old_el.childNodes[i].nodeValue;
このあたりが結構危うい感じなので参考URLを一読しておくことをお勧めします。
参考URL:http://moz.skillup.jp/docs/dom/technote/whitespa …
No.3
- 回答日時:
>ペーストしてみたのですが、どうもうまくいかないみたい…。
ブラウザとかは何をお使いですか?
サンプルは、一応IE6とFireFox1.0では動作確認しています。
サンプルが動かないという意味でしょうか?
ネスケでは、innerHTMLが働かないので、動作しないと思います。
自分のページに適用してみたがうまく行かないという場合は、補足でソースを挙げて下さい。
>かなり手抜きのサンプル
1から始まり、数字の抜けがないとか
数字の後に必ず"."があるとか
そういうことを前提としているので、そういうことをなるべく前提を少なくした汎用的なものを作るべきだけれども、そうしていないので「手抜き」をしていると言っております。
-------------------------------------------------------------------
ということで、innerHTMLに依存しないように、
DOMを使ってデータの部分にアクセスするように修正してみました。
今回は、Array.sort()を使っています。
ここでも、
テキスト<br>のような形になっていること。
初めの「.」の後ろが切り出すデータであることを前提としています。
行全体をソートの対象としているので、
数字で始まっているかどうかとか数字に抜けがあるかどうかは関係ありません。
ソート後のループは、1つにできますが、あえて処理を分けてあります。
-------------------------------------------------------------------
<script type="text/javascript">
<!--
window.onload=function (){
var old_el = document.getElementById("data");
var data = new Array();
for(var i=0;i< old_el.childNodes.length;i+=2){
data[i/2]=old_el.childNodes[i].nodeValue;
}
data.sort();
for(var i=0;i<data.length;i++){
data[i]=data[i].substr(data[i].indexOf(".")+1);
}
var new_el = document.createElement(old_el.nodeName);
for(var i=0;i<data.length;i++){
new_el.appendChild(document.createTextNode(data[i]));
br_el = document.createElement("BR");
new_el.appendChild(br_el);
}
old_el.parentNode.replaceChild(new_el, old_el);
}
//-->
</script>
この回答への補足
取り急ぎ、ご質問へのお返事だけさせて頂きます。
申し訳ないです、ブラウザの問題のようだったようです。
こちらでは、頂いたソースをそのままペーストして、
opera7にて確認していました。
また新しいソースも試させて頂きます。
BLUEPIXY様、steel_gray様、
お二方にご回答を頂けて大変感謝しております。
ありがとうございます。
No.2
- 回答日時:
かなり手抜きのサンプルです。
この例の場合、各行に順番となる数値がありますから、その数値を番号とする配列に切り出しで、数値の順番に取り出しています。
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>並び替え?</title>
<script type="text/javascript">
<!--
window.onload=function (){
var data = (document.getElementById("data").innerHTML).split(/<br>/i);
var lines = Array();
for(var i=0;i<data.length;i++){
lines[parseInt(data[i])]=data[i].substr(data[i].indexOf(".")+1);
}
var outStr="";
for(var i=1;i<lines.length;i++){
outStr+=lines[i]+"<br>";
}
document.getElementById("data").innerHTML=outStr;
}
//-->
</script>
</head>
<body>
<div id="data">
3.文字C<br>
4.文字D<br>
2.文字B<br>
6.文字F<br>
1.文字A<br>
5.文字E<br>
</div>
</body>
</html>
ご回答、どうもありがとうございます。
ペーストしてみたのですが、どうもうまくいかないみたい…。
「かなり手抜きのサンプル」とのことなので
これをヒントに作ってみなさい!と教えて下さったのですよね。
いま、試行錯誤しています^^;
わざわざ、プログラムを書いて下さって、
どうもありがとうございました!
No.1
- 回答日時:
テーブルの内容をソートするサンプルならそこそこあると思うので「javascript テーブル ソート」で検索してみるとみつかります。
また、内容の書き換え(1.~6.を消す)については
・内容を取得する。
・それを書き換える。
の二つの処理が必要になりますが、前者についてはソートする過程で内容を「見て」いるわけですから検索して探したソートのjavascriptを読み解いてみてください。
書き換えについてはいくつか方法はありますが文字列置換を使うといいかと思います。
「Javascript replace」で検索してみてください。
いろいろ調べたいとの事で直接的な回答は避けましたががんばってください。
時間があれば参考URLとそのリンク先も見てみて下さい。
参考URL:http://www.shoshinsha.com/pukiwiki/pukiwiki.php? …
ご回答ありがとうございます^^
実は、検索やらしてみたのですが、
正直、ちんぷんかんぷんです…TT
でも、参考URLなど頂いたので、いろいろ見てみたいと思います。
どうもありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イラストレーター、縦中横のシ...
-
Colorboxがうまく設置できません
-
読み込んだQRコードをフォーム...
-
階層別の組織図の自動作成について
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
-
このプログラムに王様の逃げ道...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
初心者です。gulpでコンパイル...
-
前回の質問の続き function mou...
-
鍵盤アプリで、スマホの画面に...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
Colorboxがうまく設置できません
-
階層別の組織図の自動作成について
-
二次元配列を使って順位をだす...
-
【GAS】WEBアプリでハイパーリ...
-
HTMLで作った時報アプリが動き...
-
セレクトを全て選択されていな...
-
画面遷移を行わずに同一ページ...
-
jsで質問です。 ボタンが二つ存...
おすすめ情報