0

JavaScriptのXMLHttpRequestを使用してPHPページにレンダリングしたいデータベースのテーブルがあります。テーブルの各エントリをHTML行/セルとしてレンダリングし、各「エントリ」に2つのボタンを配置したいと思います。エントリ内のすべてのボタンで、ロジックを処理する特定のJavaScript関数を呼び出させたいと思います。

したがって、基本的に、テーブルに10行ある場合、20個のボタンがあり、各ボタンは、クリックされたボタンの「タイプ」に応じて、2つの関数のいずれかにパラメーターを渡します。

これを行う方法について何かアイデアはありますか？

ありがとう！

4

1 に答える 1

1

サーバーでは、次のような PHP ファイル/アクションが必要です。

$return = array();
$q = mysql_query('SELECT * FROM ...');
while(($return[] = mysql_fetch_assoc($q)) !== false);
echo json_encode($return);

事前に作成された HTML ページでは、データを印刷するためのコンテナーが必要です。

<div id="db-container"></div>

次に、そのページに含まれる JS (ここでは単純さと読みやすさのために jQuery を使用しますが、ネイティブ JS またはおそらく他の JS ツールを使用して実行できます):

function getDB() {
  $.getJSON(
    'http://url.to/your/code.php',
    {},
    function(data) {
      var renderedHTML = '';
      /* parse the object representing PHP's $return, mainKey will be numerical keys */
      for(var mainKey in data) {
        /* one main loop iteration == one table row */
        renderedHTML += '<tr>'
        /* data[mainKey] is a row in DB, subKey will contain a name of a DB table column */
        /* data[mainKey][subKey] will therefore contain the value of DB table column 'subKey' for the DB table row numbered 'mainKey' */
        for(var subKey in data[mainKey]) {
          renderedHTML += '<td>' + data[mainKey][subKey] + '</td>'
        }
        /* statically add another HTML table column for the buttons */
        renderedHTML += '
          <td>
            <input type="button" name="b1" onclick="func1(\'arg1\')">
            <input type="button" name="b2" onclick="func2(\'arg2\')">
          </td>
        ';
        renderedHTML += '</tr>'
      }
      /* insert the built table into the page */
      $('#db-container').html('<table>' + renderedHTML + '</table>');
    }
  );
}

お役に立てれば。

于 2012-09-21T08:18:42.747 に答える