DOM

テーブル項目の入れ替え

• 必要性から自分で書いてみました。
• 作ってはみたものの、もうDraggableにぐりぐりやれるものを書けないとダメなんでしょうね。。
• きちんと整理しきれていませんがコピペで動作すると思います

<script type="text/javascript">
function moveUp(oj){
	var cloneObj = oj.parentNode.parentNode.cloneNode(true);
	var tbodyNode = document.getElementById('tbody_node');
	var oldId = cloneObj.id;
	var swap = oldId.slice(2,3);
	if(swap.slice(0,1) != '0'){//no1 - no9まで
		if(swap - 1 != '0'){//最初の行対策
			var tmp = swap - 1;
			var newId = "no" + tmp;
			cloneObj.id = newId;
			var changedNode = document.getElementById(newId);
			changedNode.id = oldId;
		
			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]);
			}
			oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode);
		}
	}
}
function moveDown(oj){
	var cloneObj = oj.parentNode.parentNode.cloneNode(true);
	var tbodyNode = document.getElementById('tbody_node');
	var oldId = cloneObj.id;
	var swap = oldId.slice(2,3);
	var lastnum = 0;
	for(var i=0; i<tbodyNode.childNodes.length; i++){
		if(tbodyNode.childNodes[i].nodeName == 'TR'){
			lastnum++;
		}
	}
	if(swap.slice(0,1) != '0'){//no1 - no9まで
		if(swap != lastnum){//最後の行対策
			var tmp = parseInt(swap) + 1;
			var newId = "no" + tmp;
			cloneObj.id = newId;
			var changedNode = document.getElementById(newId);
			changedNode.id = oldId;
			
			var Browser = navigator.userAgent;
			if(Browser.match(/MSIE/)){
				tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[tmp-1].nextSibling);
			} else if(Browser.match(/Gecko/)){
				if(tmp == 2){
					var gecko_tmp = tmp * 2 - 1;
				} else {
					var gecko_tmp = tmp * 2;
				}
				
				//alert(tmp);
				//alert("gecko_tmp->" + gecko_tmp);
				//alert(tbodyNode.childNodes[gecko_tmp].nodeType);
				for(var i=0; i<tbodyNode.childNodes.length; i++){
					if(tbodyNode.childNodes[i].nodeType == 1){
						//alert(tbodyNode.childNodes[i].nodeName);
					} else {
						//alert(tbodyNode.childNodes[i].nodeType);
					}
				}
				tbodyNode.insertBefore(cloneObj, tbodyNode.childNodes[gecko_tmp].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="no1">
			<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="no2">
			<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="no3">
			<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="no4">
			<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>
	</tbody>
	</table>
<!--	<input type="button" value="add_rows" onclick="add()"> -->