0

次のように、php 配列から 2 列の HTML テーブルを生成しています。

<table>
  <?php
    $i=0
    foreach ($fullNameArray as $namePair){
      echo
        "<tr>
          <td id='first ".$i."'>".$namePair[0]."</td>
          <td id='last".$i."'>".$namePair[1]."</td>
        </tr>";
      $i++;
    }
  ?>
</table>

たとえば、PHP配列を複製する配列、つまり[名、姓]のペアの配列を作成するなど、Javascriptでこのテーブルを探索する最良の方法は何ですか。

4

3 に答える 3

1

昔ながらの純粋な JavaScript の方法を使いたい場合は、簡単な DOM トラバーサルを行うことができます。

テーブルにを追加するidと、特にページに他のテーブルがある (または後で追加する可能性がある) 場合は、作業がずっと楽になります。

<table id="nameTable">
    ...
</table>

これで、JavaScript でテーブルにアクセスし、その参照を変数に格納できるようになりました。後で名前を保持するために、空の配列/リスト変数を初期化することもできます。

var nameTable = document.getElementById("nameTable");
var nameArray = [];

次に、テーブルの子要素のループを開始します。それぞれがtr(テーブル行) 要素になります。

for (var i=0; i<nameTable.childNodes.length; i++) {
    ...
}

そのループ内でfor、[first name, last name] ペアのリストを作成します。これを行うにtdは、現在の行の 2 つの (テーブル データ セル) 子のそれぞれの値を取得します。

    var dataCells = nameTable.childNodes[i].childNodes;
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML];

これにより、次のようなJSON配列が得られるはずです(私の値が追加されました):

[
    ["Andy", "Jackson"],
    ["Barry", "Obama"],
    ["Benny", "Franklin"],
    ["Georgey", "Washington"],
    ["Billy", "Clinton"]
]

確認すると、完全なコードは次のようになります。

var nameTable = document.getElementById("nameTable");
var nameArray = [];

for (var i=0; i<nameTable.childNodes.length; i++) {
    var dataCells = nameTable.childNodes[i].childNodes;
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML];
}

注:これは楽しいことですが、ソース コードにハードコードされた JSON 配列を気にしない場合 (テーブルがそこにある場合は問題ありません)、より良い解決策である可能性があります。@JayBhattが提案したように、おそらくPHPから直接タグjson_encodeにd配列を出力します。<script>これはおそらくより高速な方法であり、ユーザーのブラウザーにかかるストレスがはるかに少なくなります。

于 2013-03-12T19:19:25.370 に答える
1

PHPのjson_encodeを使用して配列をJsonにエンコードし、この文字列をjavascript変数に割り当て、javascriptを使用してjsonを配列にデコードします...

于 2013-03-12T18:58:36.040 に答える
1

別の方法は、json を javascript の代わりに非表示の入力に割り当て、後で javascript コードで入力値を取得することです。

于 2013-03-12T19:05:19.800 に答える