將按鈕連接到具有MySQL條目的JavaScript函數

Question

我有一個數據庫中的表，我想使用JavaScript中的XMLHttpRequest呈現給PHP頁面。我想要將表格中的每個條目呈現爲HTML行/單元格，並且在每個「條目」中都有兩個按鈕。我想讓條目中的每個按鈕都調用一個特定的JavaScript函數來處理邏輯。所以基本上，如果我在表格中有10行，我將有20個按鈕，每個按鈕將傳遞一個參數給2個函數，具體取決於哪個「類型」的按鈕被點擊。

關於如何去做這件事的任何想法？

謝謝！

Answer 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>'); 
    } 
); 
} 

希望這有助於。