テーブルの一部を回転する。その２

JavaScript

doc.createDocumentFragment ()　を配列に格納し、そこに移動。
一気に追加。


<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<style>
tr:nth-of-type(1) { background: #fdd; }
td:nth-of-type(1) { background: #fdd; }
td {
  text-align: center;
}
</style>
<body>

<table border="1"></table>

<script>

var ary = [
  [  0,  1,  2,  3,  4,  5,  6,  7,  8,  9 ],
  [ 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ],
  [ 30, 31, 32, 33, 34, 35, 36, 37, 38, 39 ],
  [ 40, 41, 42, 43, 44, 45, 46, 47, 48, 49 ],
  [ 50, 51, 52, 53, 54, 55, 56, 57, 58, 59 ],
  [ 60, 61, 62, 63, 64, 65, 66, 67, 68, 69 ],
  [ 70, 71, 72, 73, 74, 75, 76, 77, 78, 79 ],
  [ 80, 81, 82, 83, 84, 85, 86, 87, 88, 89 ],
  [ 90, 91, 92, 93, 94, 95, 96, 97, 98, 99 ],
];


(function () {
  function insertTD (text) {
    this.insertCell (-1).textContent = text;
  }
  
  function insertTR (record) {
    record.forEach (insertTD, this.insertRow (-1));
  }
  
  function createTBody (ary) {
    var tbody = document.createElement ('tbody');
    ary.forEach (insertTR, tbody);
    return tbody;
  }
  
  this.createTBody = createTBody;
}) ();

var table = document.querySelector ('table');
table.appendChild (createTBody (ary));

// テーブル、開始行、開始列、幅、時計回り（９０度ｘ）
function rotate (table, sy, sx, wd, clockwise) {

  var doc = table.ownerDocument;
  var buf = [];
  var x, y, r, b, c;
  var tx, ty;
  
  for (var i = 0; i < wd; i++)
    buf.push (doc.createDocumentFragment ());
  
  switch (clockwise % 4 |0) {
  case 0 :
    return;
  
  case 1 : case -3 :
    for (y = sy + wd - 1; sy <= y; y--) {
      c = table.rows[y].cells;

      for (x = 0; x < wd; x++)
        buf[x].appendChild (c[sx]);
    }
    break;
  

  case 2 : case -2 :
    ty = sy + wd - 1;
    tx = sx + wd - 1;
    for (y = 0; y < wd; y++) {
      b = buf[y];
      c = table.rows[ty - y].cells;

      for (x = tx; sx <= x; x--)
        b.appendChild (c[x]);
    }
    break;
  
  
  case 3 : case -1 :
    tx = wd - 1;
    for (y = 0; y < wd; y++) {
      c = table.rows[sy + y].cells;

      for (x = tx; 0 <= x ; x--)
        buf[x].appendChild (c[sx]);
    }
    break;
  }


  for (y = 0; y < wd; y++) {
    r = table.rows[sy + y];
    c = r.cells[sx];
    if (c)
      r.insertBefore (buf[y], c);
    else
      r.appendChild (buf[y]);
  }
}

rotate (table, 1, 1, 9, 1);

</script>