• ベストアンサー

こんなJavaScriptありますか?

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のレベルは、ほぼゼロです。 でも自分でいろいろ調べようと思っていますので そのヒントを頂ければ嬉しいです。 どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.6

> 改行コードが無くなっているということですか? Firefoxでは余計な<br>が先頭についています。 なお、これはIEでは発生しませんでした。(検証不足でした。) >>この問題の原因とは異なりますが 勘違いしてましたが、まさにこれ(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。 > より良い方法をご教授して下さるとありがたいです。 地道にnodeValue中の\nを削除する。 \nだけのテキストノードは除外する。 と、なるでしょうか?もっといい方法があるのかもしれないけれど思いつきませんでした。 Javascriptに手をいれない方法として最後の <br> </div> を <br></div> と改行しないようにするのが最も楽そうだけど。 話が飛躍してしまって質問者さんには失礼しています。

その他の回答 (6)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答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については、残念ですが持ってませんので、動作確認ができません。申し訳ありません。<(_ _)>

non_milky
質問者

お礼

詳しい解説をいただき、ありがとうございます。 これで、いろいろいじってみたいと思います。 BLUEPIXY様、steel_gray様、お二方にとても感謝しています。 どうもありがとうございました!

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

#4>結果が期待したものと違っている事がわかります。 ご指摘ありがとうございます。 できたら、もっとはっきりと言って貰ったほうが嬉しいです。 改行コードが無くなっているということですか? >data[i/2]=old_el.childNodes[i].nodeValue; が危うい感じなのは、一応理解しているつもりです。 できたら、より良い方法をご教授して下さるとありがたいです。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答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/whitespace/
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答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>

non_milky
質問者

補足

取り急ぎ、ご質問へのお返事だけさせて頂きます。 申し訳ないです、ブラウザの問題のようだったようです。 こちらでは、頂いたソースをそのままペーストして、 opera7にて確認していました。 また新しいソースも試させて頂きます。 BLUEPIXY様、steel_gray様、 お二方にご回答を頂けて大変感謝しております。 ありがとうございます。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答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>

non_milky
質問者

お礼

ご回答、どうもありがとうございます。 ペーストしてみたのですが、どうもうまくいかないみたい…。 「かなり手抜きのサンプル」とのことなので これをヒントに作ってみなさい!と教えて下さったのですよね。 いま、試行錯誤しています^^; わざわざ、プログラムを書いて下さって、 どうもありがとうございました!

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

テーブルの内容をソートするサンプルならそこそこあると思うので「javascript テーブル ソート」で検索してみるとみつかります。 また、内容の書き換え(1.~6.を消す)については ・内容を取得する。 ・それを書き換える。 の二つの処理が必要になりますが、前者についてはソートする過程で内容を「見て」いるわけですから検索して探したソートのjavascriptを読み解いてみてください。 書き換えについてはいくつか方法はありますが文字列置換を使うといいかと思います。 「Javascript replace」で検索してみてください。 いろいろ調べたいとの事で直接的な回答は避けましたががんばってください。 時間があれば参考URLとそのリンク先も見てみて下さい。

参考URL:
http://www.shoshinsha.com/pukiwiki/pukiwiki.php?JavaScript%A4%F2%CA%D9%B6%AF%A4%B7%A4%BF%A4%A4
non_milky
質問者

お礼

ご回答ありがとうございます^^ 実は、検索やらしてみたのですが、 正直、ちんぷんかんぷんです…TT でも、参考URLなど頂いたので、いろいろ見てみたいと思います。 どうもありがとうございました!

関連するQ&A

  • JavaScriptの多次元ソートについて

    JavaScriptの多次元ソートについて こんにちは。 現在このJavaScriptにArray型にそれぞれソートをかけたいのですが、どのようにすべきでしょうか? var list = [ {1,Aさん,6,.473,19,9,2,0,1,14,3,2,5,0,5,.583,.736} {2,Bさん,5,.294,17,5,3,0,2,14,4,1,4,0,4,.428,.823} {3,Cさん,6,.333,21,7,1,0,0,8,2,0,2,0,2,.391,.380} {4,Dさん,6,.272,22,6,1,0,0,7,4,3,1,0,2,.304,.318} {5,Eさん,6,.545,22,12,3,1,1,20,15,1,2,0,1,.583,.909} ] お分かりになりましたらよろしくお願いします!

  • excel 7条件一括のソート方法

    excelの表を7条件 一度の操作でソートしたいです。 A      B     C    D    E     F     G     H       data1  data2 小計1   data3  data4  小計2   合計 Aさん   28    27     55    30    25     55    110 Dさん   29    26     55    30    25     55    110 Cさん   27    28     55    29    26    55     110 Bさん   28    28     56    27    27    54     110 上記のEXCELの表があった場合の ソート条件  1 H列の数が少ない順  2 1が同じ場合Gが少ない順  3  2が同じ場合Fが少ない順 4 3が同じ場合Eが少ない順 5 4が同じ場合Dが少ない順 6 5が同じ場合Cが少ない順 7 6が同じ場合Bが少ない順 となるように するには どうしたらよいでしょうか?    間違いをなくすために 数度のソートを繰り返すことはしたくありません。         よろしくお願いいたします  

  • javascriptでtoFixedを切り捨てに

    javascriptの知識が乏しく苦戦しております。 レートを含む計算式をサイトに載せる時に、変動する数字を書きなおして、電卓で計算するのが手間で、 変動した数値を代入するだけで計算結果が表示されるようにしたいと思います。 javascriptを使えばできるかと思い、書いてみて、四捨五入での形式ではなんとか形になったのですが、後から四捨五入ではなく小数点以下切り捨てで表示させたいと思いました。 切り捨ての際の書き方がわからず、上手くいかないのでご助言いただけますと幸いです。 ■下記が現状です <SCRIPT LANGUAGE="JavaScript"> <!-- var a; var b; var c; var d; var e; var f; var yakujyo; var risoku; var uketori; a = 20000; b = 1.0275; c = 90.10; d = 0.1025; e = 129; f = 360; yakujyo = (a * b * c).toFixed(0); risoku = ((a * d ) * (e / f) * c).toFixed(0); uketori = ((a * b * c) + ((a * d ) * (e / f) * c)).toFixed(0);   bb = (b * 100).toFixed(2); dd = (d * 100).toFixed(2); //計算式 document.write ("<h3>計算式(為替:1オーストラリアドル=",c,"円と仮定)</h3>"); document.write ("◆2万オーストラリアドルを購入、債券単価",bb,"%の場合<br />"); document.write ("<b>約定代金</b>&nbsp; ",a,"AUD×",bb,"%×",c,"円=",yakujyo.replace(/(\d)(?=(\d{3})+$)/g, "$1,"),"円<br />"); document.write ("<b>利息</b>&nbsp; ",a,"AUD×",dd,"%×(",e,"/",f,")※×",c,"円=",risoku.replace(/(\d)(?=(\d{3})+$)/g, "$1,"),"円<br />"); document.write ("<b>受取金額</b>&nbsp",yakujyo.replace(/(\d)(?=(\d{3})+$)/g, "$1,"),"円+",risoku.replace(/(\d)(?=(\d{3})+$)/g, "$1,"),"円=",uketori.replace(/(\d)(?=(\d{3})+$)/g, "$1,"),"円<br /><br />"); // --> </SCRIPT>

  • エクセルVBAでコマンドボタンをクリックし、連続入力する方法。

    初めまして。仕事の書類を作っている最中に壁に当たったのでご質問させていただきました。 早速ですが本題に入りたいと思います。 ユーザーフォームを使用してテキストボックスを使い3つのテキストボックスに入力を終えた後にコマンドボタンを押してセルB2,C3,D4に表示するとします。(下図のように) A B C D E 1 2 あ い う 3 4 5 6 このとき、また違う文字をテキストボックスに入力し、登録した場合、 B列,C列,D列の最終行+1にどんどん入力していくというコードは調べてわかったのですが、下図のように上下とも既に文字列が入っていて、この間セル(B3:B6,C3:C6,D3,D6)に上から順にコマンドボタンを押す度どんどん入れていくためのVBAはどうなるのでしょうか? A B C D E F 1 2 s d f d 3 4 5 6 7 f f f f 8 9 10 ちなみにこの場合だと8列目もしくは変なところに飛ぶと思うのですが…。 どうぞよろしくお願い致します。

  • 数学の問題についてお聞きします

    a,b,c,d,e,f,gの7文字を並べるとき、a,b,cがこの順になるのは何通りか この問題が7!╱3!=840という答えになるのはなぜでしょうか… どなたか教えてください<m(__)m>

  • javascript計算についての質問

    単位の計算でSなら4、Aなら3、Bなら2、Cなら1、D、Fなら0で、それぞれ取得した単位数を入力したら平均を求めるjavascriptを作りたいのですがどのようにすればいいのかわかりません どなたかご教授ください。 たとえばSのところに4を入力してBのところに3を入力したなら、平均のところに3を出力するみたいな <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>QPA</title> <script language="JavaScript" type="text/javascript"> <!-- function calc(theForm) // 小数点以下を切り捨てる theForm.result.value = Math.floor(resultVal); } } //--> </script> </head> <body bgcolor="#ffffff"> <h2>指定したQPAを足した平均</h2> 全体の平均=(Sの総得点+Aの総得点+Bの総得点+Cの総得点+Dの総得点+Eの総得点+Fの総得点)/(Sの総単位数+Aの総単位数+Bの総単位数+Cの総単位数+Dの総単位数+Eの総単位数+Fの総単位数) <form name="myForm"><p> </p></form>

  • 行列データ?の文字列操作についてです。

    行列データ?の文字列操作についてです。 ----------------------------------------------- ID A B C D E 1 1.5 1.1 a 6 2 7.4 b 1 3 7.2 c 1 4 3.2 3.1 a 1 5 1.9 1.6 a 4 6 4.0 d 3 8.0 (上手く張れませんので、画像ファイルをつけました。 実際のデータはこのようにtabが入っています。) ----------------------------------------------- 上記のような文字列?をテキストボックスのようなところに入力(ペースト)し、 変換ボタンを押すことにより、 変換後文字列 1.1-1.5(6, a), 1.6-1.9(4, a), 3.1-3.2(1, a), 4.0(3, d, 8.0), 7.2(1, c), 7.40(1, b) と変換させたい。 行っていることは下記になります。 1、B列の数字が入力されていて、A>Bの時にはAとBを入れ替える。 2、A列の数字で昇順でソートする。 3、B列の数字が入力されているものは「A-B」とする。 4、それぞれの行を「A-B(D, C,E)」として「,」でつなぐ。 今回文字列の例として6行のものを示しましたが、行数は増減します。 列はE列まででこちらは増減しません。 Excel VBAを用いて行っているのですが、javascriptで組みたいと考えています。 可能なものでしょうか?

  • スケジュールを立てるのに、数学が弱くて困っています。

    スケジュールをうまく分配することについてアドバイスお願いします。 A…15,B…7,C…18,D…19,E…26,F…15 この6つを重ならないようにうまく分けたいのですが、数に差があってどうしてもうまく分けることができません。 例えばA…5,B…4,C…6,D…5,E…4,F…6だったら C→F→A→D→F→B→C→E→A→D→C→F→A→B→C→D→E→F→A→B→C→D→E→F→A→B→C→D→E→F という順にうまく分けられるのですが、A…15,B…7,C…18,D…19,E…26,F…15だと数にさがありすぎてうまく分けることができません。 そういうのをできるツール、フリーソフトウェアや解決方法など些細なことでもかまいませんのでアドバイスよろしくお願いします。

  • javascript についてご教示くださいませ。

    javascript についてご教示くださいませ。 初心者でございます。 あるサイトでjavascript の見本がありました。 表示されているソースではボタンをおした時に 1つの文字がランダムに表示されます。 これを3✕5(下記のように表示させたい) A B B C D A A A A C B A D D C 乱数で表示させるにはどのように変更したら良いでしょうか? 自分で色々勉強しろというご意見もあると思いますが何卒宜しくお願いいたします。 <form><input type="button" value="クリック" onClick="omikuji()"></form> <script type="text/javascript"> function omikuji() { rand = Math.floor(Math.random()*5); if (rand == 0) msg = "A"; if (rand == 1) msg = "B"; if (rand == 2) msg = "C"; if (rand == 3) msg = "D"; if (rand == 4) msg = "E"; alert(msg); } </script>

  • ハッシュのハッシュのソート

    rubyでハッシュのソート方法についてはいくつか情報のサイトを見つけられました。 ですが今やりたいのは、ハッシュのハッシュのソートなのですが、うまいやり方がわかりませんでした。 具体的には、 h1 = {"user1"=>{"a"=>10, "b"=>20, "c"=>30"}, "user2"=>{"d"=>5, "e"=>8}, "user3"=>{"f"=>10, "g"=>5, "h"=>10} } というようなハッシュのハッシュを想定しています。ユーザごとに案件ごとの必要工数(時間)をハッシュとして持たせ、全工数が多いユーザ順にソートしたいのです。 上記の場合だと、 {"user1"=>{"a"=>10, "b"=>20, "c"=>30"}, "user3"=>{"f"=>10, "g"=>5, "h"=>10}, "user2"=>{"d"=>5, "e"=>8} } というようにソートしたいのですが、何かやり方がありましたらご教授いただけますでしょうか。

    • ベストアンサー
    • Ruby

専門家に質問してみよう