Добавить строку таблицы из входных данных JSON - PullRequest
Новая
       4

Добавить строку таблицы из входных данных JSON

0 голосов
/ 13 июня 2018

Я пытаюсь добавить строку в таблицу HTML из входных данных JSON, используя AJAX.Я хочу добавить только определенные столбцы.Я могу получить таблицу, чтобы показать;однако строки не добавляются.

См. ниже для 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>");
    }
    });
}

enter image description here

1 Ответ

0 голосов
/ 13 июня 2018

Вы не добавляете строки таблицы надлежащим образом

Если у вас есть несколько строк для добавления, вам нужно создать несколько тегов строк и добавить данные, как это

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);
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...