как добавить данные к определенному тегу h2?

Question

У меня есть сценарий ajax, который загружает данные из файла CSV. Тем не менее, мне трудно подготовить его к определенному тегу h2.

Вот что у меня есть:

    <script>
$.ajax({
  url: 'csv_data.csv',
  dataType: 'text',
}).done(successFunction);

function successFunction(data) {
  var allRows = data.split(/\r?\n|\r/);
  var table = '<table>';
  for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
    if (singleRow === 0) {
      table += '<thead>';
      table += '<tr>';
    } else {
      table += '<tr>';
    }
    var rowCells = allRows[singleRow].split(',');
    for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
      if (singleRow === 0) {
        table += '<th>';
        table += rowCells[rowCell];
        table += '</th>';
      } else {
        table += '<td>';
        table += rowCells[rowCell];
        table += '</td>';
      }
    }
    if (singleRow === 0) {
      table += '</tr>';
      table += '</thead>';
      table += '<tbody>';
    } else {
      table += '</tr>';
    }
  } 
  table += '</tbody>';
  table += '</table>';
  $('body').append(table);
}
</script>

Вот мой CSV-файл:

Name,City,Country
William,Yamrat,Nigeria

и я пытаюсь добавить его к определенному тегу h2:

$('<h2>Test</h2>').prepend(table)

Не уверен, почему это не работает. Есть идеи, почему он не предшествует данному тегу h2?

Answer 1

Две главные вещи здесь. Во-первых, элемент H2 не существует во время «предварительного добавления». Во-вторых, будет разумнее заменить все это, добавив H2 и таблицу одновременно. Другой вариант, если у вас уже есть элемент H2, используйте jQuery .after, намного проще .. http://api.jquery.com/after/

Answer 2

ваш код не работает, потому что вы используете неподходящий селектор jQuery для выбора h2. h2 должен существовать, либо кодируя его в HTML, либо добавляя его с помощью JavaScript, затем вы можете настроить таргетинг на него с помощью jQuery, например:

   <h2 id="foo">test</h2>

    // JS
    const table = '<table></table>';

    $('#foo').prepend(table);

рабочая ручка https://codepen.io/JustH/pen/gZeWNR

Отдельная проблема заключается в том, что таблица внутри H2 недействительна, и ваш браузер будет выдавать предупреждения

см. Почему я не могу иметь

если вы пытаетесь просто вставить таблицу до или после h2, используйте .before или .after

$('#foo').before(table);

// will result in:
<table></table>
<h2 id="foo">Test</h2>

Answer 3

Рассмотрите возможность использования объектов jQuery для улучшения вашего кода. Пример:

var myData = "Name,City,Country\r\nWilliam,Yamrat,Nigeria";
/*
$.ajax({
  url: 'csv_data.csv',
  dataType: 'text',
}).done(successFunction);
*/
$(function() {
  function successFunction(data) {
    var allRows = data.split(/\r?\n|\r/);
    var tbl = $("<table>");
    tbl.append($("<thead>"), $("<tbody>"));
    $.each(allRows, function(i, row) {
      var cells = row.split(",");
      console.log(row, cells);
      if (i == 0) {
        $("<tr>").appendTo($("thead", tbl));
        $.each(cells, function(k, v) {
          $("thead > tr", tbl).append($("<th>").html(v));
        });
      } else {
        var r = $("<tr>").appendTo($("tbody", tbl));
        $.each(cells, function(k, v) {
          r.append($("<td>").html(v));
        });
      }
    });
    console.log(tbl.prop("outerHTML"));
    $("h2:first").before(tbl);
  }

  successFunction(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Test</h2>

Предложите использовать .before() для добавления элемента перед селектором. Если это конкретный элемент h2, лучше всего присвоить элементу уникальный идентификатор или определенный класс:

<h2 class="banner">Test</h2>

затем используйте это для добавления: $(".banner") в противном случае вы добавите все элементы h2. Селектор является ключом.

В зависимости от того, сколько таблиц вы составляете, вы можете рассмотреть возможность перемещения этого в функцию:

function makeTable(r, h){
  var tbl = $("<table>");
  if(h == undefined){
    h = false;
  }
  if(h){
    tbl.append($("<thead>"));
  }
  tbl.append($("<tbody>"));
  $.each(r, function(i, row) {
    var cells = r.split(",");
    if (i == 0 && h) {
      $("<tr>").appendTo($("thead", tbl));
      $.each(cells, function(k, v) {
        $("thead > tr", tbl).append($("<th>").html(v));
      });
    } else {
      var tr = $("<tr>").appendTo($("tbody", tbl));
      $.each(cells, function(k, v) {
        tr.append($("<td>").html(v));
      });
    }
  });
  return tbl;
}

Тогда используйте так:

var myTable = makeTable(allRows, true);
$("h2").before(myTable);

Надеюсь, это поможет.

Answer 4

.prepend() и .append() предназначены для помещения элемента внутрь другого элемента (до или после существующего содержимого), но таблица не может быть внутри элемента заголовка. Вы должны добавить каждый из них индивидуально к телу:

$('body').append('<h2>Test</h2>', table);