┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-a"/></td>             │
│        <td><input type="text" name="col2[]" value="2-a"/></td>             │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-b"/></td>             │
│        <td><input type="text" name="col2[]" value="2-b"/></td>             │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="submit" value="送信"/>                                       │
│</form>                                                                     │
└──────────────────────────────────────┘
明細をPOSTする場合、name属性を個別に配列にすると、項目ごとの配列となってしまう。
┌──────────────────────────────────────┐
│$_POST['col1'] = array(                                                     │
│    0 => '1-a',                                                             │
│    1 => '1-b',                                                             │
│);                                                                          │
│$_POST['col2'] = array(                                                     │
│    0 => '2-a',                                                             │
│    1 => '2-b',                                                             │
│);                                                                          │
└──────────────────────────────────────┘

データベースからデータを取得したような多次元連想配列にしたい場合には？
┌──────────────────────────────────────┐
│$_POST['data'] = array(                                                     │
│    0 => array(                                                             │
│        'col1' => '1-a',                                                    │
│        'col2' => '2-a',                                                    │
│    ),                                                                      │
│    1 => array(                                                             │
│        'col1' => '1-b',                                                    │
│        'col2' => '2-b',                                                    │
│    ),                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

まず、name属性をつけて直接POSTするのではなく、class属性で束ねて
それらを編集してPOSTする方式に切り替える。
よって、submitボタンではなく、buttonボタンを使用する。
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="button" id="submit" value="送信"/>                           │
│</form>                                                                     │
└──────────────────────────────────────┘
さて、送信方法だが、二つの案がある。(以下jQueryを使用、PHPで受信を例とする)

【案１】hidden項目で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var index = 0;                                                          │
│    $('tbody tr').each(function() {                                         │
│        $(this).closest('form')                                             │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col1]')  │
│                                .val($(this).find('.name-col1').val())      │
│            )                                                               │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col2]')  │
│                                .val($(this).find('.name-col2').val())      │
│            );                                                              │
│        index++;                                                            │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = $_POST['data'];                                             │
└───┴──────────────────────────────────┘
  hidden項目を生成して、そこに設定して送信する。
  よって、そのまま使える。

【案２】JSON文字列で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var jsonArray = new Array();                                            │
│    $('tbody tr').each(function() {                                         │
│        jsonArray.push({                                                    │
│            "col1" :$(this).find('.name-col1').val(),                       │
│            "col2" :$(this).find('.name-col2').val()                        │
│        });                                                                 │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .append($('<input>').prop('type', 'hidden')                         │
│                            .prop('name', 'data')                           │
│                            .val(JSON.stringify(jsonArray))                 │
│        )                                                                   │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = json_decode($_POST['data'], TRUE);                          │
└───┴──────────────────────────────────┘
  一旦、連想配列(ハッシュオブジェクト)にしたものを
  「JSON.stringify()」でJSON文字列に変換して、送信する。
  PHP側では「json_decode()」でデコードする必要がある。
  一つの項目として送信するので(変換処理は必要だが)管理がしやすいという利点あり。

以下のような多次元連想配列(ハッシュオブジェクト)があった場合、
JSON文字列に変換すると…。
┌──────────────────────────────────────┐
│var 配列 = new Array();                                                     │
│配列.push({                                                                 │
│    "列1"   :'値1-1',                                                       │
│    "列2"   :'値1-2'                                                        │
│});                                                                         │
│配列.push({                                                                 │
│    "列1"   :'値2-1',                                                       │
│    "列2"   :'値2-2'                                                        │
│});                                                                         │
│var ハッシュオブジェクト = {                                                │
│    "header"    :'ヘッダ',                                                  │
│    "data"      :配列                                                       │
│};                                                                          │
├──────────────────────────────────────┤
│var JSON文字列 = JSON.stringify(ハッシュオブジェクト);                      │
└──────────────────────────────────────┘

JSON文字列の結果は以下のような文字列になる(実際には改行・余白はない)。
┌──────────────────────────────────────┐
│{"header":"ヘッダ",                                                         │
│       "data":[{"列1":"値1-1","列2":"値1-2"},{"列1":"値2-1","列2":"値2-2"}]}│ 
├──────────────────────────────────────┤
│{                                                                           │
│    "header"    :"ヘッダ",                                                  │
│    "data"      :[                                                          │
│        {                                                                   │
│            "列1"   :"値1-1",                                               │
│            "列2"   :"値1-2"                                                │
│        },                                                                  │
│        {                                                                   │
│            "列1"   :"値2-1",                                               │
│            "列2"   :"値2-2"                                                │
│        }                                                                   │
│    ]                                                                       │
│}                                                                           │
└──────────────────────────────────────┘

ちなみにこのJSON文字列をPHP(json_decode())で配列に変換すると、
以下のようなデータとなる。
┌──────────────────────────────────────┐
│var_export(json_decode($JSON文字列, TRUE));                                 │
├──────────────────────────────────────┤
│array (                                                                     │
│  'header' => 'ヘッダ',                                                     │
│  'data' =>                                                                 │
│  array (                                                                   │
│    0 =>                                                                    │
│    array (                                                                 │
│      '列1' => '値1-1',                                                     │
│      '列2' => '値1-2',                                                     │
│    ),                                                                      │
│    1 =>                                                                    │
│    array (                                                                 │
│      '列1' => '値2-1',                                                     │
│      '列2' => '値2-2',                                                     │
│    ),                                                                      │
│  ),                                                                        │
└──────────────────────────────────────┘

クラスっぽく定義してみた。
┌──────────────────────────────────────┐
│var newJavaScript = {                                                       │
│    member  :'メンバ変数',                                                  │
│    run     :function() {                                                   │
│        this.alert();                                                       │
│    },                                                                      │
│    alert   :function() {                                                   │
│        alert(this.member);                                                 │
│    }                                                                       │
│};                                                                          │
├──────────────────────────────────────┤
│newJavaScript.run();                                                        │
└──────────────────────────────────────┘
っていうか既にオブジェクトじゃん。

突然、大きな添字の配列に値を代入した場合、配列はどうなるのか？

PHPだと添字配列も連想配列の一部なので、そこまでの配列は欠番となる。

では、JavaScriptの場合は？
┌──────────────────────────────────────┐
│var 配列 = [];                                                              │
│配列[2] = 値;                                                               │
│alert(配列.length);  // →「3」(0,1,2)                                      │
└──────────────────────────────────────┘
こちらの場合は、配列はあくまで添字配列なので(連想配列はハッシュで代用)、
欠番はできず、値のない配列ができる。

画面リロードの方法としては以下が著名である。
┌──────────────────────────────────────┐
│location.reload();                                                          │
└──────────────────────────────────────┘

以下の方法も使える。
┌──────────────────────────────────────┐
│location.href = location.href;                                              │
└──────────────────────────────────────┘
これは自分自身にリダイレクトすることによりリロード相当としている。

前者と後者の違いはPOST項目を再送信するかという点。
前者は再送信するが、後者はリダイレクトなので再送信しない。

再送信しなければPOST項目を引き継げないが、再送信する場合には
「このページを再表示するには、以前送信した情報を再送信する必要があります」的な
ダイアログが表示される恐れがある。

ちなみに念には念を入れて、GETパラメータ(「?」以降)を除去したURLにすれば
過去(直前)のPOST項目の影響もGET項目の影響も受けなくできる。
┌──────────────────────────────────────┐
│location.href = location.href.replace(/\?.*$/, '');                         │
└──────────────────────────────────────┘

次に、「top」、「clientTop」、「scrollTop」、「offsetTop」。
「hegiht」とは概念が違うので注意。

┌─────┬───────────────────────────────┐
│      top │本来の領域からずれた縦幅                                      │
│clientTop │＝padding(ずれた後の中身までの縦幅)                           │
│scrollTop │見えない領域の先頭からの縦幅                                  │
│offsetTop │bodyからの縦幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘

「left」の場合も同様。
┌─────┬───────────────────────────────┐
│      left│本来の領域からずれた横幅                                      │
│clientLeft│＝padding(ずれた後の中身までの横幅)                           │
│scrollLeft│見えない領域の先頭からの横幅                                  │
│offsetLeft│bodyからの横幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘

次に、「height」、「clientHeight」、「scrollHeight」、「offsetHeight」。
┌──────┬───────────────────────────────┐
│      height│＝height                                                      │
│clientHeight│＝height＋padding                                             │
│scrollHeight│＝height＋padding                               ＋見えない領域│
│offsetHeight│＝height＋padding＋scrollbar＋border                          │
└──────┴───────────────────────────────┘
  ・「clientHeight」と「scrollHeight」は基本的に同じだが、
    スクロールバーが発生して見えない領域がある場合、
    「scrollHeight」はそれも含むという違いがある
  ・昔のIEでは「scrollHeight」の仕様が違う
    スクロールしていない場合は、中身のサイズのみ
    (つまり短いスクロールバーがあるであろうサイズのみ)を返していた
  ・スクロールバーが表示されると、
    paddingの内側が短く(実際に短くなるのはheight)なるが、
    「offsetHeight」以外はその煽りを受けて短くなってしまう
  ・「scrollHeight＋scrollbar＋border」という全部盛りは用意されていない
    「border」は「.css('border-top-width')」と「.css('border-bottom-width')」で
    算出できるが、「scrollbar」は「約16px」とかが使われたりする
    「＝offsetHeight－clientHeight＋scrollHeight」でできそうな感じがするが

「width」の場合も同様。
┌──────┬───────────────────────────────┐
│      width │＝width                                                       │
│clientWidth │＝width＋padding                                              │
│scrollWidth │＝width＋padding                                ＋見えない領域│
│offsetWidth │＝width＋padding＋scrollbar＋border                           │
└──────┴───────────────────────────────┘

但し、情報が錯綜しているので、本当かどうかは今後検証していく。
ブラウザによる違いとかもありそう。

まず、「outerHeight」と「innerHeight」。

これらはwindowの要素であり、以下の違いがある。
┌─────────┬────────────────────────────┐
│window.outerHeight│ブラウザ全体の縦幅                                      │
│window.innerHeight│ブラウザ内表示領域の縦幅(枠線やメニューバー等を除く)    │
└─────────┴────────────────────────────┘

widthの場合も同様。
┌─────────┬────────────────────────────┐
│window.outerWidth │ブラウザ全体の横幅                                      │
│window.innerWidth │ブラウザ内表示領域の横幅(枠線やメニューバー等を除く)    │
└─────────┴────────────────────────────┘

jQueryなどでCSSの値において「■px」と、
「px」単位が付加されて取得されるものがある。

これを数値化するには、以下のように文字列置換してさらに数値変換する方法がある。
┌──────────────────────────────────────┐
│Number($(this).css('top').replace(/px/, ''))                                │
└──────────────────────────────────────┘

もっと簡単な方法(しかもメジャーな方法)として「parseInt()」を使う方法がある。
┌──────────────────────────────────────┐
│parseInt($(this).css('top'))                                                │
└──────────────────────────────────────┘
「parseInt()」は数値じゃない項目の手前までを数値として取り込む関数である。

但し、数値にできるものが一つもなかった場合には「NaN」を返す性質がある。
┌──────────────────────────────────────┐
│parseInt('')                                                           →NaN│
└──────────────────────────────────────┘

よって、以下のような感じで関数化してしまうのが安全化も。
┌──────────────────────────────────────┐
│pxNumber($(this).css('top'))                                                │
├──────────────────────────────────────┤
│function pxNumber(str) {                                                    │
│    return isNaN(parseInt(str)) ? 0 : parseInt(str);                        │
│}                                                                           │
└──────────────────────────────────────┘

PHPの場合「"\n"」は改行コードに変換されるが、
「'\n'」は変換されず「\n」となる。

では、JavaScriptではどうか？

「"\n"」も「'\n'」も改行コードに変換される。

例えば「alert('a\b');」とした場合、「a」と「b」の間に改行が入る。