2

Необходимо при помощи Jquery последовательно, с задержкой в 1 секунду, выводить данные в ячейки таблицы. Количество строк динамично. Заголовок и подвал таблицы при этом остаются неизменными.

var jtable = [{
    strkod: 353,
    strloc: "склад 1",
    strtab: 25468,
    strkat1: 0,
    strkat2: 1,
    strkat3: 1,
    strkat4: 0,
    strprim: ""
  },
  {
    strkod: 682,
    strloc: "склад 2",
    strtab: 98562,
    strkat1: 1,
    strkat2: 0,
    strkat3: 1,
    strkat4: 1,
    strprim: ""
  }
];
    ViewTable (jtable); //передача внутри Ajax
function ViewTable (Vtbl){
    ; //дальше запутался
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" align="center">
  <thead>
    <tr>
      <th rowspan="2">Код</th>
      <th rowspan="2">Локация</th>
      <th rowspan="2">Номер</th>
      <th colspan="4">Категория</th>
      <th rowspan="2">Примечание</th>
    </tr>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tbody>
  <tfoot>
    <th colspan="4">Кнопка "НАЗАД"</th>
    <th colspan="4">Кнопка "Отправить"</th>
  </tfoot>
</table>

Ссылка на https://jsfiddle.net/Mister_X_2k/hzmkc2f5

PS: перебрал кучу скриптов, запутался, но решения так и не смог написать. Чтобы не вводить в заблуждение профи свои ошибочные изыскания не привожу.

)))Извините, если задачу описал не в полном объеме. Дополнение: массив/объект "jtable" получаю из Ajax-запроса в виде json. Здесь привожу как пример парочки строк вывода. Каждая строка вывода содержит одинаковые идентификаторы, различны только их значения. Для точного описания задачи:

  1. первая строка:

    • "strkod",
    • задержка 1 секунда выводится "strloc",
    • задержка 1 секунда - "strloc",
    • задержка 1 секунда - "strtab",
    • задержка 1 секунда - "strkat1",
    • задержка 1 секунда - "strkat2",
    • задержка 1 секунда - "strkat3",
    • задержка 1 секунда - "strkat4",
    • задержка 1 секунда - "strprim";
  2. вторая строка:

    • задержка 1 секунда - "strkod",
    • задержка 1 секунда - "strloc",
    • задержка 1 секунда - "strtab",
    • задержка 1 секунда - "strkat1",
    • задержка 1 секунда - "strkat2",
    • задержка 1 секунда - "strkat3",
    • задержка 1 секунда - "strkat4",
    • задержка 1 секунда - "strprim";

и т.д. весь массив данных.

3
  • Какие строки выводить нужно ?
    – Netahaki
    22 июл 2018 в 11:51
  • 1
    "Чтобы не вводить в заблуждение профи свои ошибочные изыскания не привожу." - - не волнуйтесь за "профи". Мы что, должны сами сочинить пример с данными и их распределением по строкам и столбцам таблицы? Это - вряд ли. -1
    – user176262
    22 июл 2018 в 12:03
  • Igor, приношу свои извинения за введение Вас в заблуждение... вариант данных для вывода добавил с "дополнением"
    – War Doctor
    22 июл 2018 в 15:28

1 ответ 1

1

var jtable = [{
    strkod: 353,
    strloc: "склад 1",
    strtab: 25468,
    strkat1: 0,
    strkat2: 1,
    strkat3: 1,
    strkat4: 0,
    strprim: ""
  },
  {
    strkod: 682,
    strloc: "склад 2",
    strtab: 98562,
    strkat1: 1,
    strkat2: 0,
    strkat3: 1,
    strkat4: 1,
    strprim: ""
  },
  {
    strkod: 777,
    strloc: "склад 3",
    strtab: 98562,
    strkat1: 12,
    strkat2: 0,
    strkat3: 12,
    strkat4: 12,
    strprim: "222"
  }
];
ViewTable (jtable); //передача внутри Ajax
function ViewTable (data, iRow, iCell) {
  if (typeof iRow == "undefined")
    iRow = 0;
  if (typeof iCell == "undefined")
    iCell = 0;

  if (iRow >= data.length)
    return;
    
  var row = $("table tbody tr").last();
  if (!row.length) {
    row = $("<tr/>");
    $("table tbody").append(row);
  }

  var keys = Object.keys(data[iRow]);
  if (iCell >= keys.length) {
    iRow++;
    iCell = 0;
    if (iRow >= data.length)
      return;
    row = $("<tr/>");
    $("table tbody").append(row);
  }

  var keys = Object.keys(data[iRow]);
  var cell = $("<td/>");
  cell.text(data[iRow][keys[iCell]]);
  row.append(cell);
    
  setTimeout(ViewTable, 1000, data, iRow, iCell + 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" align="center">
  <thead>
    <tr>
      <th rowspan="2">Код</th>
      <th rowspan="2">Локация</th>
      <th rowspan="2">Номер</th>
      <th colspan="4">Категория</th>
      <th rowspan="2">Примечание</th>
    </tr>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <th colspan="4">Кнопка "НАЗАД"</th>
    <th colspan="4">Кнопка "Отправить"</th>
  </tfoot>
</table>

7
  • Igor, спасибо за напутствие. Можно ли докрутить Ваш код так чтобы вывод значения в следующую ячейку производился после секундной задержки, а не вся строка сразу?
    – War Doctor
    22 июл 2018 в 16:07
  • 1
    @WarDoctor Можно. Изменил.
    – user176262
    22 июл 2018 в 16:26
  • огромнейшее спасибо, что помогли с поиском решения. Не поверите, за две недели мозги уже совсем отказались воспринимать последовательность выполнения задачи...
    – War Doctor
    22 июл 2018 в 16:30
  • 1
    @WarDoctor Почему же не поверю? Еще как поверю ).
    – user176262
    22 июл 2018 в 16:32
  • 1
    @WarDoctor Можно. Изменил.
    – user176262
    22 июл 2018 в 16:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.