生成动态 HTML 表格

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h2>做一个基于下拉列表值的表格。</h2>
  6.  
  7. <select id="myselect" onchange="change_myselect(this.value)">
  8.   <option value="">Choose an option:</option>
  9.   <option value="customers">Customers</option>
  10.   <option value="products">Products</option>
  11.   <option value="suppliers">Suppliers</option>
  12. </select>
  13.  
  14. <p id="demo"></p>
  15.  
  16. <script>
  17. function change_myselect(sel) {
  18.   var obj, dbParam, xmlhttp, myObj, x, txt = "";
  19.   obj = { table: sel, limit: 20 };
  20.   dbParam = JSON.stringify(obj);
  21.   xmlhttp = new XMLHttpRequest();
  22.   xmlhttp.onreadystatechange = function() {
  23.     if (this.readyState == 4 && this.status == 200) {
  24.       myObj = JSON.parse(this.responseText);
  25.       txt += "<table border='1'>"
  26.       for (x in myObj) {
  27.         txt += "<tr><td>" + myObj[x].name + "</td></tr>";
  28.       }
  29.       txt += "</table>"    
  30.       document.getElementById("demo").innerHTML = txt;
  31.       }
  32.     };
  33.   xmlhttp.open("POST", "json_demo_db_post.php", true);
  34.   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  35.   xmlhttp.send("x=" + dbParam);
  36. }
  37. </script>
  38.  
  39. </body>
  40. </html>
  41.