Question

您好我想要显示多个表格，并且通过使用ajax＆amp; amp;点击单击按钮消耗json数据来动态地提供表格数据。 javascript，jquery。对于单个表，我可以使用以下程序生成表。

$.ajax({
    type: 'GET',
    url: xxx.xxx.xxx.xxx,
    data: "Id=" + clO + "&Location=" + clOp +"",

    success: function (resp) {          
        var Location = resp;
        var tr;          
        for (var i = 0; i < Location.length; i++) {

            tr = tr + "<td style='height:20px' align='left'>" + Location[i].name + "</td>";
            tr = tr + "<td style='height:20px' align='right'>" + Location[i].QTY + "</td>";
            tr = tr + "<td style='height:20px' align='right'>" + Location[i].AMT + "</td>";
            tr = tr + "</tr>";

        };
        document.getElementById('p_w').style.display = "block";
        document.getElementById('Wise').innerHTML = "<table id='rt1' >" + "<thead ><tr><th style='height:20px'>Name</th>" + "<th style='height:20px'>Qty</th>" + "<th style='height:20px'>Amnt</th>"+ "</tr></thead>"
            + tr +
            "<tr><td style='height:20px'></td></tr>" +
            "</table>";
        document.getElementById('Wise').childNodes[0].nodeValue = null;

    },
    error: function (e) {
        SpinnerPlugin.activityStop();
        window.plugins.toast.showLongBottom("Please Enable your Internet 
        SpinnerPlugin.activityStop();

    }
});

但是使用ajax单击生成多个表我们如何生成并且我想以下面的格式生成多个表

table, th, td {
    border: 1px solid black;
}

<body>
<p> Table 1</p>
<table style="width:100%">

  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<p> Table 2</p>
<table style="width:100%">

  <tr>
    <th>Subject</th>
    <th>Marks</th> 
    
  </tr>
  <tr>
    <td>Science</td>
    <td>70</td>
   
  </tr>
  <tr>
    <td>Computers</td>
    <td>80</td>
    
  </tr>
  <tr>
    <td>Art</td>
    <td>70</td>
    
  </tr>
</table>
<p>Table 3</p>
<table style="width:100%">

  <tr>
    <th>Laptop</th>
    <th>Price</th> 
    
  </tr>
  <tr>
    <td>Dell</td>
    <td>$350</td>
   
  </tr>
  <tr>
    <td>Lenovo</td>
    <td>$450</td>
    
  </tr>
  <tr>
    <td>Asus</td>
    <td>$200</td>
    
  </tr>
</table>
</body>

Answer 1

＆＃13;

/* Sample response expected as Ajax  */
var data = {
  Student: [{
    name: 'abc',
    age: '20'
  }, {
    name: 'xyz',
    age: '30'
  }],
  MarkList: [{
    subject: 'English',
    mark: '50'
  }, {
    subject: 'Arabic',
    mark: '75'
  }],
  Products: [{
    company: "Dell",
    Amount: '50'
  }, {
    company: "HP",
    Amount: '100'
  }]
};

/* Called on Ajax success  */
fnAjaxSuccess(data);

function fnAjaxSuccess(data) {
  document.getElementById('main').innerHTML = '';
  FillStudentList(data.Student, 1);
  FillMarkList(data.MarkList, 2)
  FillProductList(data.Products, 3);
}

/* Creating 1st table  */
function FillStudentList(Student, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < Student.length; i++) {
    html += "<tr><td>" + Student[i].name + "</td><td>" + Student[i].age + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

/* Creating 2nd table  */
function FillMarkList(MarkList, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < MarkList.length; i++) {
    html += "<tr><td>" + MarkList[i].subject + "</td><td>" + MarkList[i].mark + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

/* Creating 3rd table  */
function FillProductList(Products, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < Products.length; i++) {
    html += "<tr><td>" + Products[i].company + "</td><td>" + Products[i].Amount + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

＆＃13;

table, th, td {
    border: 1px solid black;
}

＆＃13;

<div id='main'></div>

＆＃13;

这里假设，你的ajax响应将有足够的数据来填充3个表。

您可以将其写为

$(document).on('click', '#id-of-button', function(){
    $.ajax({
        type: 'GET',
        url: xxx.xxx.xxx.xxx,
        data: "Id=" + clO + "&Location=" + clOp +"",

        success: function (resp) {
            fnAjaxSuccess(resp);
        },
        error: function (e) {
            SpinnerPlugin.activityStop();
            window.plugins.toast.showLongBottom("Please Enable your Internet 
            SpinnerPlugin.activityStop();
        }
    });
});

如何使用ajax

1 个答案: