Код jQuery для добавления таблицы при вызове setInterval

0

Я хочу называть функцию getTestStatus каждые 10 sec Это проверяет, существуют ли какие-либо данные или нет, если они существуют, чтобы получить данные и отобразить их в таблице. но то, что происходит в приведенной выше таблице кодов, создается каждые 10 секунд. Мне нужно создать таблицу на основе полученных данных (мой цикл содержит только 3 значения).

interval = setInterval(function () {
      getTestStatus(len, $('#server').val());
    },1000);

...

   function getTestStatus(len, server) {
    var  string1 = '<table border="1"><tr><td>No</td><td>Testcase</td> <td>OS</td> <td>Browser</td> <td>Steps</td> <td>Result</td></tr><!--REPORT_BODY--></table>'; 
      $.ajax({
        url: '/getReports',
        cache: false
      }).done(function (html) {
        if (html != "") {
          $('#testResult').show();  
          $.each(html, function (i, data) {
    string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';

     });
       $('#testResult').append( string1 );
        }

      }).fail(function () {   
        $('#edit').removeAttr("disabled");
      });
    }

<div id="testResult" style="padding-left: 120px; "></div>
  • 0
    html != "" определенно не собирается это гарантировать. попробуйте предупредить значение html и посмотрите, что будет, если html не является верным html.
  • 0
    значения становятся правильно ..
Показать ещё 6 комментариев
Теги:

2 ответа

1

Несколько проблем с вашим кодом.

  1. $.each использовать $.each для простых html данных. Использование формата данных JSON намного лучше.
  2. Нехорошо создавать новую таблицу каждый раз, когда вы пинете скрипт - это кошмар по производительности. Итак, что вам нужно сделать, это создать таблицу статически и добавить только новые строки.
  3. То, что вы делаете сейчас, - это просто получить каждый отчет и вставить его в таблицу. Может быть, вы можете что-то сделать, чтобы определить только новые отчеты на вашем сервере?

В любом случае, самое быстрое решение без изменения кода на стороне сервера:

<script>
     // Why do you pass parameters, if you don't use any of them?
     function getTestStatus() {
        $.ajax({
           url: "/getReports",
           cache: false,
           dataType: "JSON"
        }).done(function(response){
            var thead = $("</thead>").html("<tr><th>No</th><th>Testcase</th><th>OS</th><th>Browser</th><th>Steps</th><th>Result</th></tr>");
            var tbody = $("</tbody>").html(
               $.map(response, function(data, index){
                  return '<tr><td rowspan="3">'+index+'</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';
               });
            );
            var table = $("</table>").append(thead).append(tbody);
            $("#testResult").html(table);
        }).fail({

            //if no report -- hide the table

            $("#testResult").html("");

            $('#edit').removeAttr("disabled");                
        });
     }      
</script>

Когда вы укажете "json" как dataType вы будете запускать done() только в том случае, если ваш ответ является значением JSON и в противном случае завершится иначе, что намного лучше, чем проверка того, что ваш ответ не будет пустым;

На стороне сервера вы можете использовать json_encode для обеспечения правильного ответа, если используете PHP, другие языки также имеют аналогичные функции.

  • 0
    Любые другие способы добавить таблицу в строковую переменную без putPut HTML-код таблицы внутри div
  • 0
    Отредактировано для ваших нужд.
1

Вы не создаете таблицу каждый раз, вы можете просто обновить основную часть таблицы при каждом вызове ajax. Также укажите dataType:json, так как вы ожидаете данные json от сервера.

HTML

<table border="1" id="reportTab">
 <thead>
   <tr>
     <th>No</th>
     <th>Testcase</th> 
     <th>OS</th> 
     <th>Browser</th> 
     <th>Steps</th> 
     <th>Result</th>
   </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Функция JS

function getTestStatus(len, server,string1) {
      $.ajax({
        url: '/getReports',
        cache: false
      }).done(function (html) {
        if (html != "") {
         var string1 = '';
          $('#testResult').show();  
          $.each(html, function (i, data) {
    string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';

     });
       $("#reportTab > tbody").html("");//clear the tbody
       $('#reportTab > tbody').append( string1 );//append the new data
        }

      }).fail(function () {   
        $('#edit').removeAttr("disabled");
      });
    }
  • 0
    На самом деле я хочу добавить таблицу в div, как `$ ('# testResult'). Append (string1);`
  • 0
    Поместите HTML-код таблицы в свой testResult
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню