teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問右クリックメニューからのテーブル操作

編集履歴

質問編集履歴

2

質問の内容を変えました。

2019/11/12 10:47

投稿

yuujiMotoki
yuujiMotoki

スコア90

test CHANGED
File without changes
test CHANGED
@@ -16,45 +16,47 @@
16
16
 
17
17
 
18
18
 
19
- #問題点
19
+ #解決方法
20
-
21
- 右クリック時の処理に対して、現在の選択行の位置をどうやって渡せばいいでしょうか？
22
20
 
23
21
 
24
22
 
23
+ Jクエリのイベントで統一して、選択行のINDEXをグローバル変数ROWNUMに入れて
24
+
25
- #具体的な課題
25
+ 無事に渡すことができました。（VARを付けずにグローバル化）
26
26
 
27
27
 
28
28
 
29
- とりあえず安直に、マウスで選択された際のイベントの中に、
29
+ #課題
30
-
31
- 選択行のINDEXをグローバル変数ROWNUMに入れて、
32
-
33
- それを右クリックメニュー時の変数として渡そうとしています。
34
30
 
35
31
 
36
32
 
33
+ 挿入と削除を、力づくで作りました。
34
+
37
- なぜかUNDEFIUNEDになってしまいます。
35
+ ところが、挿入と削除の瞬間が分かりにくい状態です。
38
36
 
39
37
 
40
38
 
39
+ そこでアニメーションを付けたいと思っているのですが、
40
+
41
- #質問内容
41
+ そもそもJQUERYが苦手なので、困っています。
42
+
43
+ （泥臭いコード自体も、もっとすっきりしたいところですが、
44
+
45
+ 現時点では、このコードがもっとも自分には理解しやすいです）
42
46
 
43
47
 
44
48
 
45
- いろんなソースを切り貼りして実装していますので、もっとマシな方法が教えていただけませんでしょうか？
49
+ #質問事項
46
50
 
47
51
 
48
52
 
49
- このまま、ごり押しで行きたいと思うのですが、
53
+ JQUERYでアニメーションを付けたい
50
54
 
51
- CHROMEブラウザが、右クリック時にデバックができず、
52
-
53
- 中で何が起こっているのかも、不明確な状態です。
55
+ JQUERYでコードをすっきりさせたい
54
56
 
55
57
 
56
58
 
57
-
59
+ すみませんが、私の力では、これが限界です。
58
60
 
59
61
 
60
62
 
@@ -92,37 +94,11 @@
92
94
 
93
95
 
94
96
 
95
- $(function () {
96
-
97
- $(document).on('click', '#target tr', function () {
98
-
99
- var tr = $(this).closest('tr')
100
-
101
- var x = tr.children(':eq(1)').text();
102
-
103
- var y = tr.children(':eq(2)').text();
104
-
105
- var frm = parent.frm_a01b
106
-
107
- //イメージズーム関数に渡す
108
-
109
- ysize = y * frm.myimage.height / frm.myimage.naturalHeight - frm.innerHeight / 2;
110
-
111
- frm.scrollTo(0, ysize);
112
-
113
- frm.imageZoom("myimage", "myresult", "lenz", x, y, false);
114
-
115
- });
116
-
117
- //CSVテーブルの上で、マウスを動かしたら色を変更する
118
-
119
97
  $(document).on('mousemove', '#target tr', function () {
120
98
 
121
99
  if (document.getElementById('contextmenu').style.display != "block") {
122
100
 
123
101
  $(this).css("background-color", "#CCFFCC").css("cursor", "pointer");
124
-
125
- 　　　　　　　　　　　　　　　　　　　rownum=this.indexRow;
126
102
 
127
103
  }
128
104
 
@@ -138,7 +114,21 @@
138
114
 
139
115
  });
140
116
 
117
+ $(document).on("contextmenu", '#target tr', function (e) {
118
+
119
+ document.getElementById('contextmenu').style.left = e.pageX + "px";
120
+
121
+ document.getElementById('contextmenu').style.top = e.pageY - window.pageYOffset + "px";
122
+
123
+ document.getElementById('contextmenu').style.display = "block";
124
+
125
+ rownum = this.rowIndex;
126
+
127
+ });
128
+
141
129
  });
130
+
131
+
142
132
 
143
133
  ```
144
134
 
@@ -148,43 +138,39 @@
148
138
 
149
139
 
150
140
 
151
- window.onload = function () {
141
+ function menu1() {
152
142
 
153
- document.body.addEventListener('contextmenu', function (e) {
143
+ var table = document.getElementById('target');
154
144
 
155
- document.getElementById('contextmenu').style.left = e.pageX + "px";
145
+ var row_orig = table.rows[rownum];
156
146
 
157
- document.getElementById('contextmenu').style.top = e.pageY - window.pageYOffset + "px";
147
+ var row = table.insertRow(rownum + 1);
158
148
 
159
- document.getElementById('contextmenu').style.display = "block";
149
+ for (var i = 0; i < table.rows[rownum].cells.length; i++) {
160
150
 
161
- });
151
+ var cell1 = row.insertCell(-1);
162
152
 
163
- document.body.addEventListener('click', function (e) {
153
+ cell1.innerHTML = row_orig.cells[i].innerHTML
164
154
 
165
- document.getElementById('contextmenu').style.display = "none";
155
+ }
166
156
 
167
- });
157
+ document.getElementById('contextmenu').style.display = "none";
168
158
 
169
159
  }
170
160
 
171
161
 
172
162
 
173
- function menu1() {
163
+ function menu2() {
174
164
 
175
- alert(rownum, "menu3がクリックされました。");
165
+ var table = document.getElementById('target');
176
166
 
177
- var rows = table.insertRow(row);
167
+ var row = table.deleteRow(rownum);
168
+
169
+ document.getElementById('contextmenu').style.display = "none";
178
170
 
179
171
  }
180
172
 
181
- function menu2() {
182
173
 
183
- alert(rownum, "menu3がクリックされました。");
184
-
185
- var rows = table.deleteRow(rownum);
186
-
187
- }
188
174
 
189
175
  function menu3() {
190
176
 

1

変更

2019/11/12 10:47

投稿

yuujiMotoki
yuujiMotoki

スコア90

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  #問題点
20
20
 
21
- 再度メニューに、現在の選択行の位置をどうやって渡せばいいでしょうか？
21
+ 右クリック時の処理に対して、現在の選択行の位置をどうやって渡せばいいでしょうか？
22
22
 
23
23
 
24
24