右クリックメニューからのテーブル操作

Question

#要求仕様
HTMLのテーブルがあり、下記の動作を実装したく思います。

１）テーブル上でマウスを動かすと、所定の行の色が変わる。
２）右クリックを押すと、サブメニューがでて、行に対する処理ができる。
３）処理の内容は、挿入、削除、コピー、ペースト

#解決方法

Jクエリのイベントで統一して、選択行のINDEXをグローバル変数ROWNUMに入れて
無事に渡すことができました。（VARを付けずにグローバル化）

#課題

挿入と削除を、力づくで作りました。
ところが、挿入と削除の瞬間が分かりにくい状態です。

そこでアニメーションを付けたいと思っているのですが、
そもそもJQUERYが苦手なので、困っています。
（泥臭いコード自体も、もっとすっきりしたいところですが、
現時点では、このコードがもっとも自分には理解しやすいです）

#質問事項

JQUERYでアニメーションを付けたい
JQUERYでコードをすっきりさせたい

すみませんが、私の力では、これが限界です。

<table id="target" align="center" >
省略

	<div id="contextmenu">
		<ul>
			<li onClick="menu1()">行の挿入</li>
			<li onClick="menu2()">行の削除</li>
			<li onClick="menu3()">行のコピー</li>
			<li onClick="menu4()">行のペースト</li>
		</ul>
	</div>

			$(document).on('mousemove', '#target tr', function () {
				if (document.getElementById('contextmenu').style.display != "block") {
					$(this).css("background-color", "#CCFFCC").css("cursor", "pointer");
				}
			});
			$(document).on('mouseout', '#target tr', function () {
				if (document.getElementById('contextmenu').style.display != "block") {
					$(this).css("background-color", "#ffffff").css("cursor", "normal");
				}
			});
			$(document).on("contextmenu", '#target tr', function (e) {
				document.getElementById('contextmenu').style.left = e.pageX + "px";
				document.getElementById('contextmenu').style.top = e.pageY - window.pageYOffset + "px";
				document.getElementById('contextmenu').style.display = "block";
				rownum = this.rowIndex;
			});
		});

		function menu1() {
			var table = document.getElementById('target');
			var row_orig = table.rows[rownum];
			var row = table.insertRow(rownum + 1);
			for (var i = 0; i < table.rows[rownum].cells.length; i++) {
				var cell1 = row.insertCell(-1);
				cell1.innerHTML = row_orig.cells[i].innerHTML
			}
			document.getElementById('contextmenu').style.display = "none";
		}

		function menu2() {
			var table = document.getElementById('target');
			var row = table.deleteRow(rownum);
			document.getElementById('contextmenu').style.display = "none";
		}

		function menu3() {
			alert("menu3がクリックされました。");
		}
		function menu3() {
			alert("menu3がクリックされました。");
		}

Answer 1

ゴリ押しするよりも、 jQuery.contextMenu というプラグインの検討をオススメします。

イベントハンドラに伝搬される event オブジェクトに着目し、イベント発生した要素の参照方法や、バブリングのしくみを理解したほうが近道かと思います。

いろんなソースを切り貼りして実装

jQuery をお使いのようですので、jQueryの作法に則るほうが、ひとまずの形を仕上げやすいと思います。