- ベストアンサー
ソート フォーム
以前こちらで質問させていただいたものです。 ソートのできるリストについて質問し、大変ためになる回答をい忠美案した。今回、それを少々変更する必要があります。 ソートすべきリストの中にフォーム要素のチェックボックスを入れたいのですが、ソートするとチェックが消えてしまいます。 下記のようなコードですが、どのように修正すればよいでしょうか？ どうかよろしくお願いいたします！ <html> <head><style>span{border:1px solid;margin:4px}</style></head> <body> <ol> <li> <span><a href="#" onClick="narabi(this,0)">社名</a></span> <span><a href="#" onClick="narabi(this,1)">仕入値</a></span> <span><a href="#" onClick="narabi(this,2)">小売値</a></span> <span><a href="#" onClick="narabi(this,3)">会社ID</a></span> <span>備考（ソート不要）</span> </li> </ol> <ul> <li><span>ABC</span><span ><input type="checkbox"></span><span >200</span><span >1</span><span >テキスト（ソート不要）</span></li> <li><span>BBB</span><span ><input type="checkbox"></span><span >300</span><span >2</span><span >テキスト（ソート不要）</span></li> <li><span>XYZ</span><span ><input type="checkbox"></span><span >300</span><span >3</span><span ></span></li> <li><span>A-AA</span><span ><input type="checkbox"></span><span >120</span><span >4</span><span >テキスト（ソート不要）</span></li> <li><span>A-17</span><span ><input type="checkbox"></span><span >200</span><span >5</span><span >テキスト（ソート不要）</span></li> </ul> </body> <script> var af=[]; function narabi(ob,cidx){ af[cidx]=af[cidx]?0:1; var dt=[]; var tg=parentSearch(ob,'OL').nextSibling; var li=tg.getElementsByTagName('li'); for(var i=0,m=li.length;i<m;i++){ var sp = li[i].getElementsByTagName('span'); dt[i]=sp[cidx].innerHTML+'|'; for(var j=0;j<4;j++) dt[i]+=sp[j].innerHTML+'|'; } dt.sort();if(af[cidx]) dt.reverse(); for(var i=0,m=dt.length;i<m;i++){ var sp = dt[i].split('|'); for(var j=0;j<4;j++) li[i].getElementsByTagName('span')[j].innerHTML=sp[j+1]; } } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script> </html>
- vld
- お礼率100% (9/9)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
私がそのとき答えたみたいですね^^; checkboxにIDをふりました。 ソートする前にバックアップして ソートしてから戻してます なんだか美しくありませんね;_; Firefoxでも動くようにちょっと直しました？！ <html> <head><style>span{border:1px solid;margin:4px}</style></head> <body> <ol> <li> <span><a href="#" onClick="narabi(this,0)">社名</a></span> <span><a href="#" onClick="narabi(this,1)">仕入値</a></span> <span><a href="#" onClick="narabi(this,2)">小売値</a></span> <span><a href="#" onClick="narabi(this,3)">会社ID</a></span> <span>備考（ソート不要）</span> </li> </ol> <ul> <li><span>ABC</span><span ><input type="checkbox" id="c1"></span><span >200</span><span >1</span><span >テキスト（ソート不要）</span></li> <li><span>BBB</span><span ><input type="checkbox" id="c2"></span><span >300</span><span >2</span><span >テキスト（ソート不要）</span></li> <li><span>XYZ</span><span ><input type="checkbox" id="c3"></span><span >300</span><span >3</span><span ></span></li> <li><span>A-AA</span><span ><input type="checkbox" id="c4"></span><span >120</span><span >4</span><span >テキスト（ソート不要）</span></li> <li><span>A-17</span><span ><input type="checkbox" id="c5"></span><span >200</span><span >5</span><span >テキスト（ソート不要）</span></li> </ul> </body> <script> var af=[]; function narabi(ob,cidx){ af[cidx]=af[cidx]?0:1; var dt=[]; var tg=parentSearch(ob,'OL').nextSibling; while(tg.nodeName=='#text') tg=tg.nextSibling; var li=tg.getElementsByTagName('li'); var ch=tg.getElementsByTagName('input'); var t; var chkbx =[]; for(i=0;i<ch.length;i++)if(t=ch[i].id.match(/^c(\d+)$/)) chkbx[t[1]]=ch[i].checked; for(var i=0,m=li.length;i<m;i++){ var sp = li[i].getElementsByTagName('span'); dt[i]=sp[cidx].innerHTML+'|'; for(var j=0;j<4;j++) dt[i]+=sp[j].innerHTML+'|'; } dt.sort();if(af[cidx]) dt.reverse(); for(var i=0,m=dt.length;i<m;i++){ var sp = dt[i].split('|'); for(var j=0;j<4;j++) li[i].getElementsByTagName('span')[j].innerHTML=sp[j+1]; } for(var i in chkbx)document.getElementById('c'+i).checked = chkbx[i]; } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問のスクリプトは、各liタグの内容をひっくるめて文字列に変換し、ソートしてから、また元に戻すという処理を行っています。 具体的には (1)dt[i]=sp[cidx].innerHTML+'|'; で、キーとなる項目をまず先頭に入れてから（ソートが先頭の値で判断されるため） (2)for(var j=0;j<4;j++) dt[i]+=sp[j].innerHTML+'|'; で、li全体を一つの文字列にしています。（区切り文字は「｜」） 全体を(dt[]を)ソートした後に (3)var sp = dt[i].split('|'); で、区切り文字によって分解してから (4)for(var j=0;j<4;j++) li[i].getElementsByTagName('span')[j].innerHTML=sp[j+1]; で、HTMLに戻しています。 ・・・なので、各チェックボックスのオンオフをチェックして、(2)のdt[i]に付け加え、ソート後に(3)で得られた値の内容に応じてチェックボックスのオンオフを再設定してあげればよいのではないでしょうか。
お礼
おっしゃるとおり、流れは読んでわかるのですが、書き方が悪いのかどうもうまくいきませんでした。 コメントありがとうございます。
お礼
前回に引き続き、ありがとうございます！ 問題なく動きました。 ありがとうございました！