Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

num	data
	row1 row1 row1 row1 row1 row1 row1 row1 row1 row1
	row2 row2 row2 row2 row2 row2 row2 row2 row2 row2
	row3 row3 row3 row3 row3 row3 row3 row3 row3 row3
	row4 row4 row4 row4 row4 row4 row4 row4 row4 row4
	row5 row5 row5 row5 row5 row5 row5 row5 row5 row5 row5 row5 row5 row5 row5
	row6 row6 row6 row6 row6 row6 row6 row6 row6 row6

さすがに手を抜きすぎたと反省し、とりあえずツールチップ付けてみた。これでだいぶマシかと思う。

ソースは以下にて。

JavaScript

1. var rowSelect = {
2. init: function(table){
3. var tarTable = $(table);
4. var rowList = tarTable.getElementsByTagName('tr');
5. for(i=1; i<rowList.length; i++){
6. //addEvent(rowList[i],'mouseover',rowSelect.msOver,false);
7. //addEvent(rowList[i],'mouseout',rowSelect.msOut,false);
8. //addEvent(rowList[i],'click',rowSelect.selected,false);
9. rowList[i].onmouseover = rowSelect.msOver;
10. rowList[i].onmouseout = rowSelect.msOut;
11. rowList[i].onclick = rowSelect.selected;
12. }
13.  
14. //tooltips
15. var pos = getElementPos(rowList[1]);
16. var tips = document.createElement('div');
17. var tipsP = document.createElement('p');
18. tips.className = 'tooltips';
19. tips.style.position = 'absolute';
20. tips.style.left = pos.x + rowList[1].offsetWidth + 10 + 'px';
21. tips.style.top = pos.y + 'px';
22. tipsP.innerHTML = this.text1;
23. tarTable.parentNodedocument.body.appendChild(tips);
24. this.tips = tips.appendChild(tipsP);
25. },
26.  
27. text1: 'クリックで行選択できます。<br />再選択で解除。2度目の行選択で移動先を決定します。',
28. text2: '行を選択しました。<br />続いて移動先を選択してください。再選択で解除できます。',
29. text3: '行を移動しました。',
30.  
31. msOver: function(e){
32. //var row = e.currentTarget;
33. var row = this;
34. if(row.className == 'msOver') return;
35. if(!rowSelect.selectFlag || rowSelect.selectFlag != row)
36. addClass(row,'msOver');
37. if(rowSelect.selectFlag && rowSelect.selectFlag != row)
38. addClass(row,'msOver2');
39. },
40.  
41. msOut: function(e){
42. //var row = e.currentTarget;
43. var row = this;
44. if(rowSelect.selectFlag != row){
45. delClass(row,"msOver");
46. delClass(row,"msOver2");
47. }
48. },
49.  
50. selected: function(e){
51. //var row = e.currentTarget;
52. var row = this;
53. if(rowSelect.selectFlag == row){
54. delClass(row,"msOver");
55. delClass(row,"msOver2");
56. delClass(row,"selected");
57. rowSelect.selectFlag = null;
58. rowSelect.tips.innerHTML = rowSelect.text1;
59. return;
60. }
61. else if(rowSelect.selectFlag && rowSelect.selectFlag != row){
62. var selectedRow = rowSelect.selectFlag;
63. delClass(selectedRow,"msOver");
64. delClass(selectedRow,"selected");
65. delClass(row,"msOver2");
66. var cloneRow = selectedRow.cloneNode(true);
67.  
68. //delete&insert
69. selectedRow.parentNode.removeChild(selectedRow);
70. row.insertAdjacentElement('beforeBegin',cloneRow);
71.  
72. //addEvent
73. cloneRow.onmouseover = rowSelect.msOver;
74. cloneRow.onmouseout = rowSelect.msOut;
75. cloneRow.onclick = rowSelect.selected;
76.  
77. //change tips
78. var pos = getElementPos(cloneRow);
79. rowSelect.tips.parentNode.style.top = pos.y + 'px';
80. rowSelect.tips.innerHTML = rowSelect.text3;
81. setTimeout(function(){ rowSelect.tips.innerHTML = rowSelect.text1; },1200);
82.  
83. rowSelect.selectFlag = null;
84. rowSelect.setValue(row);
85. return;
86. }
87. rowSelect.selectFlag = row;
88. delClass(row,"msOver");
89. delClass(row,"msOver2");
90. addClass(row,"selected");
91.  
92. var pos = getElementPos(row);
93. rowSelect.tips.parentNode.style.top = pos.y + 'px';
94. rowSelect.tips.innerHTML = rowSelect.text2;
95. },
96.  
97. setValue: function(row){
98. var rowList = row.parentNode.getElementsByTagName('tr');
99. for(var i=1;i<rowList.length;i++){
100. var targetNode = rowList[i].getElementsByTagName('input')[0];
101.  
102. // 表示番号のリセット
103. if(targetNode.nodeName == 'INPUT') {
104. targetNode.value = i;
105. }
106. }
107. }
108. }
109.  
110. addEvent(window,'load',function(){rowSelect.init('testTable')},false);

init()でツールチップを制作/挿入し、あとは状態変化の度にテキストを切り替えてやる。対象テキストはtext1～text3に格納。ツールチップの位置は表示上の位置を参考にしているため、CSSのレイヤー構造(position:relative等による基準位置の変更など)は含まれないが、document直下に挿入すれば見た目どおりの数値で何の問題もない。

あと、移動先の選択時用として「msOver2」クラスを追加。仕組みとしてはこれくらいあれば十分かなあ？ デザイナやディレクタと相談しませう。

関連記事

• テーブル行を手動でソートするスクリプト
• テーブル行を選択するスクリプト
• イベントオブジェクトまとめ
• FirefoxでInsertAdjacent系メソッドを利用する
• ページサイズやスクロール位置を取得する