Question

我正在尝试使用AJAX从JSON输入向HTML表添加一行。我只想添加特定的列。我能够得到表格;但是没有添加行。

请参阅下面的HTML和AJAX（使用返回的JSON）。

HTML：

<html>

  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="js/table2excel.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js/tableTest.js"></script>
  </head>

  <body>
    <p><button id="btn-export">Export</button></p>
    <table id="example" class="display" cellspacing="0" width="100%">

      <thead>
        <tr>
          <th>Activity Name</th>
          <th>Start Date</th>
          <th>End Date</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td id='adActivityName'></td>
          <td id='adStartDate'></td>
          <td id='adEndDate'></td>
        </tr>
      </tbody>
    </table>

  </body>

</html>

AJAX（使用JSON）：

function e1ActivitySelect() {
    var dataToBeSent  = {
            ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
            ssAccountID : sessionStorage.getItem('ssAccountID'),
            ssArchived : sessionStorage.getItem('ssArchived'),
    };

    $.ajax({
        url: "E1ActivitySelectView",
        data : dataToBeSent,
        type: "POST",
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
         $('#ajaxGetUserServletResponse').text('An error occured getting the Activity information.');
    })
    .done(function(responseJson1a) {
        dataType: "json";
//      alert(JSON.stringify(responseJson1a));
//  [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
    for (i=0; i < responseJson1a.length; i++) {
        $('#adActivityName').append("<td>"+a[i].adActivityName+"</td>");
        $('#adStartDate').append("<td>"+a[i].adStartDate+"</td>");
        $('#adEndDate').append("<td>"+a[i].adEndDate+"</td>");
    }
    });
}

Answer 1

您没有以正确的方式附加表格行

如果要追加多行，则需要创建多个行标记并附加这样的数据

HTML：

  <table id="example" class="display" cellspacing="0" width="100%">
     <thead>
        <tr>
          <th>Activity Name</th>
          <th>Start Date</th>
          <th>End Date</th>
        </tr>
     </thead>
     <tbody id="mytablebody">

     </tbody>
  </table>

使用Javascript：

function e1ActivitySelect() {
    var dataToBeSent  = {
        ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
        ssAccountID : sessionStorage.getItem('ssAccountID'),
        ssArchived : sessionStorage.getItem('ssArchived'),
    };

    $.ajax({
        url: "E1ActivitySelectView",
        data : dataToBeSent,
        type: "POST",
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
         $('#ajaxGetUserServletResponse').text('An error occured getting the Activity 
           information.');
    })
    .done(function(responseJson1a) {
        var tablebody = "";
        try{
           for (i=0; i < responseJson1a.length; i++) {
               tablebody += "<tr><td>"+responseJson1a[i].adActivityName+"</td><td>"++responseJson1a[i].adStartDate+"</td><td>"++responseJson1a[i].adEndDate+"</td></tr>";
           }
           $("#mytablebody").empty();
           $("#mytablebody").append(tablebody);
        }
        catch(e){
           console.log(e);
        }
    });
}

从JSON输入添加表行

1 个答案: