<script>
 
addEventListener('DOMContentLoaded', function () {
 
	var jyunjo = ["緑", "赤", "青"]
 
	var tds  = document.querySelectorAll('#TB td')
	var texts = [].map.call(tds, function (e) {return e.textContent})
 
	function observer(recs) {
		recs.forEach(function (rec) {
			tds[rec.name].textContent = texts[rec.name]
		})
	}
 
	Object.observe(texts, observer);
 
	texts.sort(function (a, b) {
		Object.deliverChangeRecords(observer)
		//return jyunjo.indexOf(a) > jyunjo.indexOf(b)  //その他は前に
		return (jyunjo.indexOf(a)+1 || 1/0) > (jyunjo.indexOf(b)+1 || 1/0)  //その他は後ろに 
	})
 
})
 
</script>
 
 
<table id='TB'><tr>
<td>青</td> 
<td>赤</td>
<td>他</td> 
<td>赤</td> 
<td>青</td> 
<td>緑</td>
<td>他</td> 
<td>緑</td>  
</tr></table>

PHNjcmlwdD4KCmFkZEV2ZW50TGlzdGVuZXIoJ0RPTUNvbnRlbnRMb2FkZWQnLCBmdW5jdGlvbiAoKSB7CgoJdmFyIGp5dW5qbyA9IFsi57eRIiwgIui1pCIsICLpnZIiXQoKCXZhciB0ZHMgID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnI1RCIHRkJykKCXZhciB0ZXh0cyA9IFtdLm1hcC5jYWxsKHRkcywgZnVuY3Rpb24gKGUpIHtyZXR1cm4gZS50ZXh0Q29udGVudH0pCgoJZnVuY3Rpb24gb2JzZXJ2ZXIocmVjcykgewoJCXJlY3MuZm9yRWFjaChmdW5jdGlvbiAocmVjKSB7CgkJCXRkc1tyZWMubmFtZV0udGV4dENvbnRlbnQgPSB0ZXh0c1tyZWMubmFtZV0KCQl9KQoJfQoKCU9iamVjdC5vYnNlcnZlKHRleHRzLCBvYnNlcnZlcik7CgoJdGV4dHMuc29ydChmdW5jdGlvbiAoYSwgYikgewoJCU9iamVjdC5kZWxpdmVyQ2hhbmdlUmVjb3JkcyhvYnNlcnZlcikKCQkvL3JldHVybiBqeXVuam8uaW5kZXhPZihhKSA+IGp5dW5qby5pbmRleE9mKGIpICAvL+OBneOBruS7luOBr+WJjeOBqwoJCXJldHVybiAoanl1bmpvLmluZGV4T2YoYSkrMSB8fCAxLzApID4gKGp5dW5qby5pbmRleE9mKGIpKzEgfHwgMS8wKSAgLy/jgZ3jga7ku5bjga/lvozjgo3jgasgCgl9KQoKfSkKCjwvc2NyaXB0PgoKCjx0YWJsZSBpZD0nVEInPjx0cj4KPHRkPumdkjwvdGQ+IAo8dGQ+6LWkPC90ZD4KPHRkPuS7ljwvdGQ+IAo8dGQ+6LWkPC90ZD4gCjx0ZD7pnZI8L3RkPiAKPHRkPue3kTwvdGQ+Cjx0ZD7ku5Y8L3RkPiAKPHRkPue3kTwvdGQ+ICAKPC90cj48L3RhYmxlPg==