【IE限定可】<tr>～</tr>タグの上げ下げ方法は？

2023/08/03 00:23

このQ&Aのポイント

以下の質問文章では、<tr>～</tr>タグの上げ下げ方法についての実装方法を教えて欲しいという内容です。
具体的には、行をクリックすると色が変わる機能はすでに実装済みであり、さらに下記の機能を実現したいとのことです。
・行を指定して「項目を上げる」をクリックすると上へ上がる・行を指定して「項目を下げる」をクリックすると下へ上がる・矢印キーでフォーカスの上下移動

ベストアンサー

IE限定可　<tr>～</tr>タグの上げ下げ方法は？

2005/12/07 01:23

<FORM id=formid name=frm action=#> <table> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 1</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 2</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 3</td> <td style=CURSOR:hand>hoge</td> </tr> <table> <input type="button" value="項目を上げる"> <input type="button" value="項目を下げる"> </form> 上記のようなフォームで以下の事が実装したいのですがどなたかご教授頂けませんでしょうか。・　項目（行）をクリックすると色が変わる　←　（実装済み）・　行を指定して「項目を上げる」をクリックすると上へ上がる・　行を指定して「項目を下げる」をクリックすると下へ上がる・　矢印キーでフォーカスの上下移動何卒お願い申し上げます。

Windynet
お礼率100% (1/1)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/12/07 06:08 回答No.1

上げ下げについてですが、参考ＵＲＬの swapRow を使って指定された行と－１の行で入替すれば上がり＋１の行で入替すれば下がるという動作ができると思います。

参考URL：: http://okwave.jp/kotaeru.php3?q=1818924

質問者

お礼 2005/12/08 22:04

素早いアドバイスありがとうございます。お返事が遅れまして申し訳ございません。参考サイトを参考にして作成してみます。連続した上がった行に対しての再度上がり処理で何かアドバイスがございましたらお教え頂けますと助かります。取り急ぎお礼申し上げます。

関連するQ&A

テーブルリンクで別ウインドウで開くようにするには？
<table> <tr> <td onClick="window.location.href='a.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> このようにしてオンマウスでTD内の色を変え、TD全体でリンクさせる時、別ウインドウで開くにはどうしたらよいですか？それとも、テーブルリンクで別ウインドウで開く指定は出来ないんでしょうか？ <table> <tr> <td onClick="window.location.href='a.html' XXXXX" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> XXXXXの部分にtarget='_blank'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。よろしくお願いします。
- 締切済み
- HTML
javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる
はじめて、投稿いたします。現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。 tableのtrが3つ以上ある場合は、指定した行が正常に削除します。しかし、IEだと、trが２つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか？よろしくお願いします。以下に、ソースを貼っておきます。 <html> <head> <script type="text/javascript">  </script> </head> <body> <h1>Hello World !!</h1> <table border="1" id="test_table"> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ bbbb ------</td> <td>------ cccc ------</td> </tr> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ BBBB ------</td> <td>------ CCCC ------</td> </tr> <tr align="center"> <td colspan="3"> <input type="button" value="add"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されませんどなたか教えて下さい <p align="center"> <TABLE HEIGHT=30 BORDER=1 BGCOLOR="#FFFFFF" CELLSPACING=0> <TR> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728074105.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">特典サービス</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728075504.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">車検費用</TD>
- ベストアンサー
- その他([技術者向] コンピューター)
TRタグの入れ子におけるchildNodesの使い方
Javascriptにおいて、TRタグが入れ子状態になっている時に、「childNodes」で子供のTRタグを取得することはできないのでしょうか？具体的には、以下のようなスクリプトを組んだ場合に、 c_obj_list[3]　には子供のTRタグが格納されるのかと思ったのですが、そうはならないようです。子供のTRタグ配下のタグに操作を行いたいのですが、どうやったら子供のTRタグ配下のタグに辿り着くでしょうか？＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"></meta> <title></title> <script> function func(obj){ var p_obj=obj.parentNode; var pp_obj=p_obj.parentNode; var c_obj_list=pp_obj.childNodes; alert("c0="+c_obj_list[0].nodeName); alert("c1="+c_obj_list[1].nodeName); alert("c2="+c_obj_list[2].nodeName); alert("c3="+c_obj_list[3].nodeName); } </script> </head> <body> <table col="4"> <tr> <td><input type="checkbox" onclick="func(this)"/></td> <td colspan="2"><textarea style="width:298px;overflow:hidden;">あああ</textarea></td> <td><textarea style="width:300px;overflow:hidden;" >いいい</textarea></td> <tr> <td width="20"></td> <td><input type="checkbox" onclick="func(this)"/></td> <td><textarea style="width:274px;overflow:hidden;">ううう</textarea></td> <td><textarea style="width:300px;overflow:hidden;" >えええ</textarea></td> </tr> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
エクセルVBAでのWeb画面の操作方法について
現在エクセルVBAでWeb画面（社内イントラネット）を、navigateを使って開くところまではできております。しかし、開いた画面で、「イメージ」という個所をクリックさせる方法がわかりません。 HTMLはほとんどわからないのですが、ソースを見ると、多分このあたりだとおもいます。 <tr><td colspan="2"> </td></tr><tr><td colspan="2" id="ImageButton" class="Button" onclick="toImage(this, 'INTRA');" onmouseover="BigOn(this);" onmouseout="BigOff(this);">イメージ</td></tr><tr><td colspan="2" id="KakoButton" class="Button" onclick="toKako(this, 'INTRA');" onmouseover="BigOn(this);" このうち、多分、onclick="toImage(this, 'INTRA');" を実行させればいいのではないかと想像します。どのような記述になるのか、ご教示いただけましたら幸いです。
- ベストアンサー
- その他MS Office製品
クリック時、テーブルの行全体を色づけするには？
テーブル上でクリックされたら、その行全体を色づけするようにしています。一見問題なく動作するのですが、ボタンやアンカーなどが含まれたセルがあると、そこだけ色付けができません。そのセルを一度もクリックしない間は良いのですが、一度でもクリックすると、その後は色づけされません。セルの中身に関わらず、選択行全体が色づけできるようにするには、どうすればよいでしょうか？ IE6での現象です。ご回答よろしくお願いします。【HTML部分】 <table> <tr onclick="rowsSelect()"> <td> </td> <td> </td> <td> </td> <td> </td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td> </td> <td> </td> <td> </td> <td> </td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td> </td> <td> </td> <td> </td> <td> </td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> </table> 【JavaScript部分】 var selRow; function rowsSelect() { var r = event.srcElement.parentElement; if(selRow!=null){ selRow.style.backgroundColor="#FFFFFF"; } selRow=r; r.style.backgroundColor="#FFDAB3"; }
- ベストアンサー
- JavaScript
HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- ベストアンサー
- CSS
jQueryのラジオボタン操作系サンプル探してます
jQueryをペチペチと勉強していますが、ちょっと詰まってしまいました。以下のような動作をするサンプルプログラムを探しています。「ラジオボタンを押下すると、それに対応するテーブルのtr要素の背景色を変更する。」 ==========ソースここから========== <table border ="1"> <tr id ="0" class ="table_1"> <td>hoge1</td><td>hoge1</td><td>hoge1</td> </tr> <tr id ="1" class ="table_1"> <td>hoge2</td><td>hoge2</td><td>hoge2</td> </tr> <tr id ="2" class ="table_1"> <td>hoge3</td><td>hoge3</td><td>hoge3</td> </tr> </table> <table border ="1"> <tr> <td><input type ="radio" name ="radio_hoge" value ="100" id ="0" class ="radio_1"></td><td>hoge1</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="200" id ="1" class ="radio_1"></td><td>hoge2</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="300" id ="2" class ="radio_1"></td><td>hoge3</td> </tr> ==========ソースここまで========== HTMLの構成はこんな感じにしてあります。下側のテーブル内のラジオボタンを押下すると、上側のテーブルのtrの背景色を変更したいのですが、指定の方法が分からず悩んでいます。（trとradioは、同一「id」値と対応する。ものとしたい。現状、他に実現してある内容は・tr行にマウスオーバーすると、trの色を変える・tr行をクリックすると、trの色を変えて保持する・tr行をクリックすると、対応するラジオボタンを選択するです。コレに、・ラジオボタンを選択すると、対応するtr行の色を変えるを追加したく思っています。当面の問題は、tr(のid？)に対して「this」以外で指定を行う方法が分からない。ということかと思っています。コレ(trに対してthis以外で指定)が分かれば、もう一つやろうとしてる、tr行でクリックした以外のtr行の色を初期色に戻す。あたりも解決すると思っているので、ご存じの方がいましたら、教えていただけると助かりますm(_ _)m 以下は、現状実現してある内容～の参考にしたサイトです。 >>・tr行にマウスオーバーすると、trの色を変える http://1bit.mobi/20120313111043.html >>・tr行をクリックすると、trの色を変えて保持する http://ponk.jp/jquery/basic/state_save の「４」番目 >>・tr行をクリックすると、対応するラジオボタンを選択する http://www.tohoho-web.com/lng/199912/99120188.htm よろしくお願いします。
- ベストアンサー
- AJAX
javascript オセロ
javascriptでオセロを作ろうと思っています。初めに「クリックしたtdタグの背景色を、クリック数が奇数回なら白、偶数なら黒にする」コードを書きたいのですが、変数とthis(クリックされたtdタグ)の使い方がいまいち分かりません。ご教授いただければと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } td { width: 100px; height: 100px; } .green { background-color:#093; } .black { background-color:#333; } .white { background-color:#CCC; } </style> <body> <table> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> </table> <script type="text/javascript">  </script> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
<td>の中のonClick="location" で
教えて下さい。 <td class="text-small" style="cursor:hand" onClick="location.href=''">XXXXXX</td> 上記のような記述に「target="_blank"」の機能をもたせるにはどうしたらいいのでしょうか？（セル内のどこでもクリックできるようにしたく、かつその時別ウィンドウが開くようにしたいのですが・・・）宜しくお願いします。
- ベストアンサー
- JavaScript