JavaScriptでテーブルの行入れ替え - babu_babu

腰が痛い。夕飯（朝食か？）後のいっぷくに書いた。でも腹減った〜！

http://oshiete.goo.ne.jp/qa/6859130.html

<!DOCTYPE html>
<title></title>

<style type="text/css">
table, th, td {
  border :1px #00f solid;
}
td, th {
  width :10em;
}

</style>

<table>
  <tr>
    <th>1
    <td>abc
    <td>def
  <tr>
    <th>2
    <td>ghi
    <td>jkl
  <tr>
    <th>3
    <td>mno
    <td>pqr
</table>

<script type="text/javascript">
//@cc_on

function get1 (e) {
  /*@if(1)
    var d = e.srcElement.ownerDocument;
    var c = ('CSS1Compat' === d.compatMode) ? d.documentElement : d.body;
    return e.clientX + c.scrollLeft;
  @else@*/
    return e.clientX + e.target.ownerDocument.defaultView.pageXOffset;
  /*@end@*/;
}


function get2 (e) {
  var x = 0; do x += e.offsetLeft; while (e = e.offsetParent); return x;
}


document./*@if (1) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'click',
  function (event) {
    var e = event.target || event.srcElement;
    
    if (/^(?:TD|TH)$/.test (e.tagName)) {
      var x = get1 (event) - get2 (e);
      var tr = e.parentNode;
      var tb = tr.parentNode;
      var a = tr.rowIndex;
      var b = a;
      
      if ((x < e.offsetWidth / 2))
        a -= 1;
      else
        b += 1;
      
      if (a < 0 || tb.rows.length <= b)
        return;

      tb.insertBefore (tb.rows[b], tb.rows[a]);
    }
  }, false);

</script>