テーブルをいじる。その５！（途中経過）

JavaScript

夕方から今までやって、これだけか〜。情けない。

テーブルの初期化の段階でマークして、querySelectorAll で集めるほうが簡単か。）


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

<style type="text/css">
thead th {
  background : #66c;
  border : 1px #88f outset;
  color : #cfc;
  height :4em;
}
tr[aria-hidden="true"] {
  visibility: collapse;
}

tbody th {
  background-color: #ddf;
  text-align: left;
  text-indent: 1ex;
  border :2px #ccf outset;
}

tbody td {
  text-indent: 0.6ex;
  border-bottom :1px #ccf dotted;
  border-right :1px #ccf dotted;
}
body {
 font-size:70%;
}
</style>

<form>
  <p>
    <select onchange="table.find(new RegExp( this.value ), 2)">
      <option value="">-
      <option value="なし">なし
      <option value="menu">menu
      <option value="listbox">listbox
      <option value="head">head
    </select>

    <select onchange="table.find(new RegExp( this.value ), 3)">
      <option value="">-
      <option value="ない">ない
      <option value="変更">変更
      <option value="指定">指定
    </select>
    <select onchange="table.limit(+this.value)">
      <option value="100">-
      <option value="1">1件
      <option value="5">5件
      <option value="10">10件
    </select>
    <input type="checkbox" id="sort">(逆順)
    <select onchange="
      table.sort(
        (this.form.elements['sort'].checked ? '-': '') + this.value);
    ">

      <option value="">ソートします
      <option value="0">項目1
      <option value="1">項目2
      <option value="2">項目3
      <option value="3">項目4
    </select>
    <input type="button" value="Reverse" onclick="table.reverse ()">
    <input type="button" value="Reset" onclick="table.reset ()">
  </p>
</form>

<!--

<table id="fuga">
<tr><td>1</td><td>1</td><td>abc</td><td>11ccbwucbwikbcwb</td></tr>
<tr><td>2</td><td>2</td><td>def</td><td>15ccbwucbwikbcwb</td></tr>
<tr><td>3</td><td>5</td><td>ghq</td><td>31ccbwucbwikbcwb</td></tr>
<tr><td>4</td><td>2</td><td>rst</td><td>61ccbwucbwikbcwb</td></tr>
<tr><td>5</td><td>2</td><td>uvw</td><td>22ccbwucbwikbcwb</td></tr>
</table>

-->
<table id="HOGE">
<thead>

 <tr><th>No.</th><th>言語特徴</th><th>デフォルトロール</th><th>備考</th></tr></thead>

<tbody>
 <tr><th colspan="4">ルート要素</th></tr>
 <tr><td>1</td><td><code>html</code></td><td>なし</td><td>変更不可。</td></tr></tbody>

<tbody>
 <tr><th colspan="4">文書メタデータ</th></tr></tbody>
 <tr><td>1</td><td><code>head</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>2</td><td><code>title</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>3</td><td><code>base</code></td><td>なし</td><td>変更不可。</td></tr>

 <tr><td>4</td><td><code>link</code>（疑似クラス <code>:link</code> にマッチするもの）</td><td><code>"link"</code></td><td>変更不可。</td></tr>
 <tr><td>5</td><td><code>meta</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>6</td><td><code>style</code></td><td>なし</td><td>変更不可。</td></tr></tbody>

<tbody>
 <tr><th colspan="4">スクリプティング</th></tr>
 <tr><td>1</td><td><code>script</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>2</td><td><code>noscript</code></td><td> </td><td> </td></tr></tbody>

<tbody><tr><th colspan="4">セクション関連</th></tr>
 <tr><td>1</td><td><code>body</code></td><td><code>"document"</code></td><td><code>"document"</code> か <code>"application"</code> でなければならない。</td></tr>
 <tr><td>2</td><td><code>section</code></td><td><code>"region"</code></td><td><code>"region"</code>, <code>"document"</code>, <code>"application"</code>, <code>"contentinfo"</code>, <code>"main"</code>, <code>"search"</code>, <code>"alert"</code>, <code>"dialog"</code>, <code>"alertdialog"</code>, <code>"status"</code>, <code>"log"</code> のどれかでなければならない。</td></tr>

 <tr><td>3</td><td><code>nav</code></td><td><code>"navigation"</code></td><td>変更不可。</td></tr>
 <tr><td>4</td><td><code>article</code></td><td><code>"article"</code></td><td><code>"article"</code>, <code>"document"</code>, <code>"application"</code>, <code>"main"</code> のどれかでなければならない。</td></tr>

 <tr><td>5</td><td><code>aside</code></td><td><code>"note"</code></td><td><code>"note"</code>, <code>"complementary"</code>, <code>"search"</code> のどれかでなければならない。</td></tr>
 <tr><td>6</td><td><code>h1</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>

 <tr><td>7</td><td><code>h2</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>
 <tr><td>8</td><td><code>h3</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>

 <tr><td>9</td><td><code>h4</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>
 <tr><td>10</td><td><code>h5</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>

 <tr><td>11</td><td><code>h6</code>（<code>hgroup</code> に含まれないもの）</td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>
 <tr><td>12</td><td><code>hgroup</code></td><td><code>"heading"</code></td><td>変更不可。<code>@aria-level</code> は当該要素のアウトライン深度。</td></tr>

 <tr><td>13</td><td><code>header</code></td><td>なし</td><td>指定するなら <code>"banner"</code> でなければならない。</td></tr>
 <tr><td>14</td><td><code>footer</code></td><td>なし</td><td>指定するなら <code>"contentinfo"</code> でなければならない。</td></tr>

 <tr><td>15</td><td><code>address</code></td><td>なし</td><td>指定するなら <code>"contentinfo"</code> でなければならない。</td></tr></tbody>

<tbody>
 <tr><th colspan="4">グループ化内容</th></tr>
 <tr><td>1</td><td><code>p</code></td><td> </td><td> </td></tr>

 <tr><td>2</td><td><code>hr</code></td><td><code>"separator"</code></td><td>変更不可。</td></tr>
 <tr><td>3</td><td><code>pre</code></td><td> </td><td> </td></tr>
 <tr><td>4</td><td><code>blockquote</code></td><td> </td><td> </td></tr>

 <tr><td>5</td><td><code>ol</code></td><td><code>"list"</code></td><td><code>"directory"</code>, <code>"list"</code>, <code>"listbox"</code>, <code>"menu"</code>, <code>"menubar"</code>, <code>"tablist"</code>, <code>"toolbar"</code>, <code>"tree"</code> のどれかでなければならない。</td></tr>

 <tr><td>6</td><td><code>ul</code></td><td><code>"list"</code></td><td><code>"directory"</code>, <code>"list"</code>, <code>"listbox"</code>, <code>"menu"</code>, <code>"menubar"</code>, <code>"tablist"</code>, <code>"toolbar"</code>, <code>"tree"</code> のどれかでなければならない。</td></tr>

 <tr><td>7</td><td><code>li</code>（ul か ol の子）</td><td><code>"listitem"</code></td><td><code>"listitem"</code>, <code>"menuitemcheckbox"</code>, <code>"menuitemradio"</code>, <code>"option"</code>, <code>"tab"</code>, <code>"treeitem"</code> のどれかでなければならない。</td></tr>

 <tr><td>8</td><td><code>dl</code></td><td> </td><td> </td></tr>
 <tr><td>9</td><td><code>dt</code></td><td> </td><td> </td></tr>
 <tr><td>10</td><td><code>dd</code></td><td> </td><td> </td></tr>

 <tr><td>11</td><td><code>figure</code></td><td> </td><td> </td></tr>
 <tr><td>12</td><td><code>figcaption</code></td><td> </td><td> </td></tr>
 <tr><td>13</td><td><code>div</code></td><td> </td><td> </td></tr></tbody>

<tbody>
 <tr><th colspan="4">テキストレベル意味論</th></tr>
 <tr><td>1</td><td><code>a:link</code>（疑似クラス :link にマッチするもの）</td><td><code>"link"</code></td><td> </td></tr>
 <tr><td>2</td><td><code>em</code></td><td> </td><td> </td></tr>

 <tr><td>3</td><td><code>strong</code></td><td> </td><td> </td></tr>
 <tr><td>4</td><td><code>small</code></td><td> </td><td> </td></tr>
 <tr><td>5</td><td><code>s</code></td><td> </td><td> </td></tr>

 <tr><td>6</td><td><code>cite</code></td><td> </td><td> </td></tr>
 <tr><td>7</td><td><code>q</code></td><td> </td><td> </td></tr>
 <tr><td>8</td><td><code>dfn</code></td><td> </td><td> </td></tr>

 <tr><td>9</td><td><code>abbr</code></td><td> </td><td> </td></tr>
 <tr><td>10</td><td><code>time</code></td><td> </td><td> </td></tr>
 <tr><td>11</td><td><code>code</code></td><td> </td><td> </td></tr>

 <tr><td>12</td><td><code>var</code></td><td> </td><td> </td></tr>
 <tr><td>13</td><td><code>samp</code></td><td> </td><td> </td></tr>
 <tr><td>14</td><td><code>kbd</code></td><td> </td><td> </td></tr>

 <tr><td>15</td><td><code>sub</code></td><td> </td><td> </td></tr>
 <tr><td>16</td><td><code>sup</code></td><td> </td><td> </td></tr>
 <tr><td>17</td><td><code>i</code></td><td> </td><td> </td></tr>

 <tr><td>18</td><td><code>b</code></td><td> </td><td> </td></tr>
 <tr><td>19</td><td><code>mark</code></td><td> </td><td> </td></tr>
 <tr><td>20</td><td><code>ruby</code></td><td> </td><td> </td></tr>

 <tr><td>21</td><td><code>rt</code></td><td> </td><td> </td></tr>
 <tr><td>22</td><td><code>rp</code></td><td> </td><td> </td></tr>
 <tr><td>23</td><td><code>bdo</code></td><td> </td><td> </td></tr>

 <tr><td>24</td><td><code>span</code></td><td> </td><td> </td></tr>
 <tr><td>25</td><td><code>br</code></td><td> </td><td> </td></tr>
 <tr><td>26</td><td><code>wbr</code></td><td> </td><td> </td></tr></tbody>

<tbody>
 <tr><th colspan="4">編集</th></tr>
 <tr><td>1</td><td><code>ins</code></td><td> </td><td> </td></tr>
 <tr><td>2</td><td><code>del</code></td><td> </td><td> </td></tr></tbody>

<tbody>
 <tr><th colspan="4">埋め込み内容</th></tr>
 <tr><td>1</td><td><code>img</code>（<code>@alt=""</code> のもの）</td><td><code>"presentation"</code></td><td>変更不可。</td></tr>
 <tr><td>2</td><td><code>img</code>（<code>@alt</code> のないもの）</td><td><code>"img"</code></td><td>制限なし。</td></tr>

 <tr><td>3</td><td><code>iframe</code></td><td>なし</td><td>指定するなら <code>"application"</code>, <code>"document"</code>, <code>"img"</code> のどれかでなければならない。</td></tr>
 <tr><td>4</td><td><code>embed</code></td><td>なし</td><td>指定するなら <code>"application"</code>, <code>"document"</code>, <code>"img"</code> のどれかでなければならない。</td></tr>

 <tr><td>5</td><td><code>object</code></td><td>なし</td><td>指定するなら <code>"application"</code>, <code>"document"</code>, <code>"img"</code> のどれかでなければならない。</td></tr>
 <tr><td>6</td><td><code>param</code></td><td>なし</td><td>変更不可。</td></tr>

 <tr><td>7</td><td><code>video</code></td><td>なし</td><td>指定するなら <code>"application"</code> でなければならない。</td></tr>
 <tr><td>8</td><td><code>audio</code></td><td>なし</td><td>指定するなら <code>"application"</code> でなければならない。</td></tr>

 <tr><td>9</td><td><code>source</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>10</td><td><code>track</code></td><td> </td><td> </td></tr>
 <tr><td>11</td><td><code>canvas</code></td><td> </td><td> </td></tr>

 <tr><td>12</td><td><code>map</code></td><td> </td><td> </td></tr>
 <tr><td>13</td><td><code>area:link</code></td><td><code>"link"</code></td><td> </td></tr></tbody>

<tbody>
 <tr><th colspan="4">表</th></tr>

 <tr><td>1</td><td><code>table</code></td><td><code>"grid"</code></td><td><code>"grid"</code>, <code>"treegrid"</code> のどれかでなければならない。</td></tr>
 <tr><td>2</td><td><code>caption</code></td><td> </td><td> </td></tr>
 <tr><td>3</td><td><code>colgroup</code></td><td> </td><td> </td></tr>

 <tr><td>4</td><td><code>col</code></td><td> </td><td> </td></tr>
 <tr><td>5</td><td><code>tbody</code></td><td> </td><td> </td></tr>
 <tr><td>6</td><td><code>thead</code></td><td> </td><td> </td></tr>

 <tr><td>7</td><td><code>tfoot</code></td><td> </td><td> </td></tr>
 <tr><td>8</td><td><code>tr</code></td><td><code>"row"</code></td><td> </td></tr>
 <tr><td>9</td><td><code>td</code></td><td><code>"gridcell"</code></td><td><code>@aria-labelledby</code> は当該要素の <code>@headers</code> を反映。</td></tr>

 <tr><td>10</td><td><code>th</code>（列ヘッダ）</td><td><code>"columnheader"</code></td><td><code>@aria-labelledby</code> は <code>@headers</code> を反映。</td></tr>
 <tr><td>11</td><td><code>th</code>（行ヘッダ）</td><td><code>"rowheader"</code></td><td><code>@aria-labelledby</code> は <code>@headers</code> を反映。</td></tr>

 <tr><td>12</td><td><code>th</code>（列ヘッダでも行ヘッダでもないもの）</td><td><code>"gridcell"</code></td><td><code>@aria-labelledby</code> は当該要素の <code>@headers</code> を反映。</td></tr></tbody>

<tbody>
 <tr><th colspan="4">フォーム</th></tr>

 <tr><td>1</td><td><code>form</code></td><td> </td><td> </td></tr>
 <tr><td>2</td><td><code>fieldset</code></td><td> </td><td> </td></tr>
 <tr><td>3</td><td><code>legend</code></td><td> </td><td> </td></tr>

 <tr><td>4</td><td><code>label</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>5</td><td><code>input</code>（@type=<code>"checkbox"</code>）</td><td><code>"checkbox"</code></td><td><code>"checkbox"</code>, <code>"menuitemcheckbox"</code> のどれかでなければならない。<code>@aria-checked</code> は、当該要素に <code>@indeterminate</code> があれば <code>"mixed"</code>、さもなくばチェック状態を反映。</td></tr>

 <tr><td>6</td><td><code>input</code>（@type=<code>"radio"</code>）</td><td><code>"radio"</code></td><td><code>"radio"</code>, <code>"menuitemradio"</code> のどれかでなければならない。<code>@aria-checked</code> は当該要素のチェック状態を反映。</td></tr>
 <tr><td>7</td><td><code>input</code>（@type=<code>"datetime"</code>）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>8</td><td><code>input</code>（@type="datetime-local"）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>9</td><td><code>input</code>（@type=<code>"date"</code>）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>10</td><td><code>input</code>（@type=<code>"month"</code>）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>11</td><td><code>input</code>（@type=<code>"week"</code>）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>12</td><td><code>input</code>（@type=<code>"time"</code>）</td><td>なし</td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>13</td><td><code>input</code>（@type=<code>"reset"</code>）</td><td><code>"button"</code></td><td>変更不可。</td></tr>

 <tr><td>14</td><td><code>input</code>（@type=<code>"submit"</code>）</td><td><code>"button"</code></td><td>変更不可。</td></tr>
 <tr><td>15</td><td><code>input</code>（@type=<code>"file"</code>）</td><td><code>"button"</code></td><td>変更不可。</td></tr>

 <tr><td>16</td><td><code>input</code>（@type=<code>"image"</code>）</td><td><code>"button"</code></td><td>変更不可。</td></tr>
 <tr><td>17</td><td><code>input</code>（@type=<code>"hidden"</code>）</td><td>なし</td><td>変更不可。</td></tr>

 <tr><td>18</td><td><code>input</code>（@type=<code>"color"</code>）</td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>19</td><td><code>input</code>（@type=<code>"number"</code>）</td><td><code>"spinbutton"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。<code>@aria-valuemax</code>、<code>@aria-valuemin</code>、<code>@aria-valuenow</code> は当該要素を反映。</td></tr>

 <tr><td>20</td><td><code>input</code>（@type=<code>"range"</code>）</td><td><code>"slider"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。<code>@aria-valuemax</code>、<code>@aria-valuemin</code>、<code>@aria-valuenow</code> は当該要素を反映。</td></tr>

 <tr><td>21</td><td><code>input</code>（@type="text, search, tel, url, email" でサジェストソースを持つもの）</td><td><code>"combobox"</code></td><td>変更不可。<code>@aria-owns</code> は当該要素の @list を反映。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>22</td><td><code>input</code>（@type=<code>"text"</code> でサジェストソースを持たないもの）</td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>23</td><td><code>input</code>（@type=<code>"search"</code> でサジェストソースを持たないもの）</td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>24</td><td><code>input</code>（@type=<code>"tel"</code> でサジェストソースを持たないもの）</td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>25</td><td><code>input</code>（@type=<code>"email"</code> でサジェストソースを持たないもの）</td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>
 <tr><td>26</td><td><code>input</code>（@type=<code>"password"</code>）</td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>27</td><td><code>button</code></td><td><code>"button"</code></td><td>変更不可。</td></tr>
 <tr><td>28</td><td><code>select</code>（<code>@multiple</code> を持つもの）</td><td><code>"listbox"</code></td><td>変更不可。<code>@aria-multiselectable</code> が <code>"true"</code>。</td></tr>

 <tr><td>29</td><td><code>select</code>（<code>@multiple</code> を持たないもの）</td><td><code>"listbox"</code></td><td>変更不可。<code>@aria-multiselectable</code> が <code>"false"</code>。</td></tr>
 <tr><td>30</td><td><code>datalist</code></td><td><code>"listbox"</code></td><td>変更不可。<code>@aria-multiselectable</code> が <code>"false"</code>。</td></tr>

 <tr><td>31</td><td><code>option</code></td><td><code>"option"</code></td><td>変更不可。<code>@aria-selected</code> は当該要素の選択状態を反映。</td></tr>
 <tr><td>32</td><td><code>textarea</code></td><td><code>"textbox"</code></td><td>変更不可。<code>@aria-multiline</code> が <code>"true"</code>、<code>@aria-readonly</code> は当該要素の <code>@readonly</code> を反映。</td></tr>

 <tr><td>33</td><td><code>keygen</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>34</td><td><code>output</code></td><td><code>"status"</code></td><td>制限なし。</td></tr>
 <tr><td>35</td><td><code>progress</code></td><td><code>"progressbar"</code></td><td>変更不可。<code>@aria-valuemin</code> は "0"、<code>@aria-valuemax</code>、<code>@aria-valuenow</code> は当該要素を反映。</td></tr>

 <tr><td>36</td><td><code>meter</code></td><td>なし</td><td>変更不可。</td></tr>
 <tr><td>37</td><td><code>:disabled</code> な要素</td><td> </td><td><code>@aria-disabled</code> が <code>"true"</code>。</td></tr>

 <tr><td>38</td><td><code>:required</code> な要素</td><td> </td><td><code>@aria-required</code> が <code>"true"</code>。</td></tr>
 <tr><td>39</td><td><code>:invalid</code> な要素</td><td> </td><td><code>@aria-invalid</code> が <code>"true"</code>。</td></tr></tbody>

<tbody>
 <tr><th colspan="4">インタラクティブ</th></tr>
 <tr><td>1</td><td><code>details</code></td><td><code>"group"</code></td><td><code>@aria-expanded</code> をサポートするロールでなければならない。</td></tr>
 <tr><td>2</td><td><code>summary</code></td><td><code>"heading"</code></td><td>変更不可。</td></tr>

 <tr><td>3</td><td><code>command</code></td><td> </td><td> </td></tr>
 <tr><td>4</td><td><code>menu</code>（<code>@type=<code>"context"</code></code> のもの）</td><td>なし</td><td>変更不可。</td></tr>

 <tr><td>5</td><td><code>menu</code>（<code>@type=<code>"toolbar"</code></code> のもの）</td><td><code>"toolbar"</code></td><td>変更不可。</td></tr>
 <tr><td>6</td><td><code>menu</code>（<code>@type</code> のないもの）</td><td><code>"menu"</code></td><td>変更不可。</td></tr>

 <tr><td>7</td><td><code>@type</code> のない <code>menu</code> の子孫で、Type 制約が <code>"checkbox"</code> のコマンド定義要素</td><td><code>"menuitemcheckbox"</code></td><td><code>@aria-checked</code> は当該コマンドの Checked 制約を反映。</td></tr>
 <tr><td>8</td><td><code>@type</code> のない <code>menu</code> の子孫で、Type 制約が <code>"command"</code> のコマンド定義要素</td><td><code>"menuitem"</code></td><td>変更不可。</td></tr>

 <tr><td>9</td><td><code>@type</code> のない <code>menu</code> の子孫で、Type 制約が <code>"radio"</code> のコマンド定義要素</td><td><code>"menuitemradio"</code></td><td><code>@aria-checked</code> は当該コマンドの Checked 制約を反映。</td></tr></tbody></table>
   

<script type="application/javascript; version=1.8">
(function () { // Asymmetrical JavaScript Abridgment Exclusively

  const isTD =
    (function (row)
      ('TD' === row.cells[this].nodeName));
  
  const FirstTD = 
    (function (ary, tbody)
      ary.concat (Array.map (tbody.rows, Object).filter (isTD, 0)))
  
  const Hide =
    (function (row)
      row.setAttribute('aria-hidden', String (this)));

  const isHide =
    (function (row)
      ! (String (this) === row.getAttribute ('aria-hidden')));

  const isView =
    (function (row)
      ('false' === row.getAttribute ('aria-hidden')));
  
  const Tbody =
    (function (no)
      let (tBodies = this.tBodies)
        (('number' === typeof no)
          ? [tBodies [no] ]
          : Array.map (tBodies, Object)));

  const RowText =
    (function (cellIndex)
      ('undefined' === typeof cellIndex)
        ? (function (row) row.textContent)
        : (function (row) row.cells[cellIndex].textContent));

//____________

  const Reset =
    (function (no)
      Tbody.call (this.table, no)
        .reduce (FirstTD, [])
          .filter (isHide, true)
            .forEach (Hide, false));


  const Reverse =
    (function (inversion)
      (function (no)
        Tbody.call (this.table, no)
          .reduce (FirstTD, [])
            .forEach (inversion)))

    (function (row)
      Hide.call (! isHide.call (false, row), row));



  const Limit =
    (function (splice)
      (function (s, e, no)
        Tbody.call (this.table, no)
          .reduce (splice (s, e), []) // reduce が callback で渡せないのでクロージャーにして
            .forEach (Hide, true)))

    (function (s, e)
      (function (ary, tbody)
        let (target = Array.map (tbody.rows, Object).filter (isHide, false))
          ary.concat (target.splice (s, e || target.length -s))));


  const find =
    (function (remove)
      (function (search_reg, cellIndex, no)
        Tbody.call (this.table, no)
          .reduce (FirstTD, [])
            .filter (isHide, false) // これは下と一緒に処理できる
              .filter (remove, { reg: search_reg, text: RowText (cellIndex) })
                .forEach (Hide, true)))

    (function (row)
      (! this.reg.test (this.text (row))));


  var sort =
    (function (tbodySort)
      (function (conditionString, no)
        Tbody.call (this.table, no)
          .forEach (tbodySort, { condition: conditionString || '0'})))

    ((function (createCompare, move)
      (function (tbody)
        let (cloneTbody = tbody.cloneNode (false))
          (Array.map (tbody.rows, Object)
            .sort (createCompare (this.condition.split (/[\s,]+/g)))
              .forEach (move, cloneTbody),
                tbody.parentNode.replaceChild (cloneTbody, tbody))))

      ((function (cond)
        (function (a, b) {
          var result = 0;
          var cnt = 0;
          var cellIndex;
          var comFlag;
          var tmp;
          var _a;
          var _b;
          
          if (isTD.call (0, a) * isTD.call (0, b))
            while (cmp = cond[cnt++]) {

              tmp = cmp.match (/^([\-\+]{0,1})([0-9]+)$/); // "-0" を扱えるよう文字列処理
              if (null === tmp)
                throw new Error ();
              
              cmpFlag = ('-' === tmp[1]) ? 1: -1; // "-"= 降、"+" or "" = 昇
              cellIndex = parseInt (tmp[2], 10);
              
              
              _a = a.cells[cellIndex].textContent;
              _b = b.cells[cellIndex].textContent;
              
              _a = isNaN (_a) ? _a: parseFloat (_a);
              _b = isNaN (_b) ? _b: parseFloat (_b);
              
              result = ((_a < _b) - (_a > _b)) * cmpFlag;

              if (result)
                break;
            }

          return result;
        })
      ),

     (function (row)
        this.appendChild (row))));


//____________

  var TableViewer = function (node) { // オブジェクト
    this.table = node;
  };

  TableViewer.prototype.reset = function (tbody) {
    Reset.apply (this, arguments);
    return this;
  };
  
  TableViewer.prototype.limit = function (start, end, tbody) {
    Limit.apply (this, arguments);
    return this;
  };
  
  TableViewer.prototype.reverse = function (tbody) {
    Reverse.apply (this, arguments);
    return this;
  };
  
  TableViewer.prototype.find = function (reg, cellIndex, tbody) {
    find.apply (this, arguments);
    return this;
  };
  
  TableViewer.prototype.sort = function (cmp, cellIndex, tbody) {
    sort.apply (this, arguments);
    return this;
  };

//____________
  this.createTableViewer =
    (function (table)
      (table instanceof HTMLTableElement)
        ? new TableViewer (table)
        : null);

})();

var table = createTableViewer (document.getElementById ('HOGE'));
table.reset().sort('-1,+3');


</script>

事務所のブレーカーが落ちる

さすがに、GTX460 × ６枚稼動はきつかったらしい。
それにしても、これからどんどん寒くなるだろうに、ここは暖かい。

２次元配列を１次元にするには

var ary = [
  [0,1,2],
  [3,4],
  [5,6,7,8,9]
];
// 以下のようにしたい。
// [0,1,2,3,4,5,6,7,8,9]

//基本
var result = [ ];

for (var i = 0, I = ary.length; i < I; i++) {
  for (var j = 0, J = ary[i].length; j < J; j++) {
    result.push (ary[i][j]);
  }
}
alert (result);

その２

var result = [ ];

for (var i = 0, I = ary.length; i < I; i++) {
  result = result.concat (ary[i]);
}
alert (result);

その３

for (var result = []; ary.length;)
  result = result.concat (ary.shift());
alert (result);

その４（再帰）

function change (a, b)
  a.length
    ? let (c = a.shift ())
      arguments.callee (a, (b || []).concat (c))
    : b;

alert(change (ary));

その４のａ

function change (a, b)
  a.length ? arguments.callee (a, (b || []).concat (a.shift ())): b;

alert(change (ary));

その５

var result = ary.reduce (function (a, b) a.concat (b), []);
alert (result);