テーブル移動再掲

地道に書きました。DOMに関して理解は深まってきた感じ

<script type="text/javascript">

function moveUp(oj){
	if(oj.parentNode.parentNode.id != '001'){//一番目の行対策
		var cloneObj = oj.parentNode.parentNode.cloneNode(true);
		var tbodyNode = document.getElementById('tbody_node');
		var tmp = parseInt(cloneObj.id, 10) - 1;
		var newId = (tmp > 9) ? ("0" + tmp.toString()) : ("00" + tmp.toString());
		var swap = cloneObj.id;
		cloneObj.id = newId;
		var moveDownNode = document.getElementById(newId);
		moveDownNode.id = swap;
		
		var Browser = navigator.userAgent;
		if(Browser.match(/MSIE/)){
			tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[tmp-1]);
		} else if(Browser.match(/Gecko/)){
			var gecko_tmp = tmp * 2 - 1;
			tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[gecko_tmp]);
			//追加したTRノードの後にTextNodeを追加(デフォルトの形を壊さないため)
			tbodyNode.insertBefore(document.createTextNode(' '), tbodyNode.childNodes[gecko_tmp + 1]);
			//移動した元ノードの一つ後ろにあったTextNodeを削除
			oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode.nextSibling);
		}
		oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode);
	}
}
function moveDown(oj){
	var tbodyNode = document.getElementById('tbody_node');
	var lastnum = 0;
	for(var i=0; i<tbodyNode.childNodes.length; i++){
		if(tbodyNode.childNodes[i].nodeName == 'TR') lastnum++;
	}
	if(parseInt(oj.parentNode.parentNode.id, 10) != lastnum){//最後の行対策
		var cloneObj = oj.parentNode.parentNode.cloneNode(true);
		var tmp = parseInt(cloneObj.id, 10) + 1;
		var newId = (tmp > 9) ? ("0" + tmp.toString()) : ("00" + tmp.toString());
		var swap = cloneObj.id;
		cloneObj.id = newId;
		var moveDownNode = document.getElementById(newId);
		moveDownNode.id = swap;
	
		var Browser = navigator.userAgent;
		if(Browser.match(/MSIE/)){
			tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[tmp-1].nextSibling);
		} else if(Browser.match(/Gecko/)){
			var gecko_tmp = tmp * 2 - 1;
			tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[gecko_tmp].nextSibling);
			//追加したTRノードの後にTextNodeを追加(デフォルトの形を壊さないため)
			tbodyNode.insertBefore(document.createTextNode(' '), tbodyNode.childNodes[gecko_tmp+1]);
			//移動した元ノードの一つ後ろにあったTextNodeを削除
			oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode.nextSibling);
		}
		oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode);
	}
}
function add(){
	var org = document.getElementById('no1');
	var clone = org.cloneNode(true);
	var tbody = document.getElementById('tbody_node');
	tbody.appendChild(clone);
	alert('属性値は処理してません');
}
function test(oj){
	var nodeId = oj.parentNode.parentNode;
	alert(nodeId.id);
}
</script>

	<table border="1">
	<tbody id="tbody_node">
		<tr id="001">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>001<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="002">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>002<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="003">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>003<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="004">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>004<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="005">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>005<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="006">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>006<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="007">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>007<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="008">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>008<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="009">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>009<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="010">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>010<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
		<tr id="011">
			<td><input type="button" value="↑" onclick="moveUp(this)">
				<input type="button" value="↓" onclick="moveDown(this)"></td>
			<td>011<input type="button" value="alert(this.id)" onclick="test(this)"></td>
		</tr>
	</tbody>
	</table>
<!--	<input type="button" value="add_rows" onclick="add()"> -->