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

您的代码不起作用，因为您使用的是不正确的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中的表无效，您的浏览器将发出警告

请参阅Why can’t I have a <table> inside an <h2>?

如果您尝试仅在h2之前或之后插入表，请使用.before或.after

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

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

Answer 2

.prepend()和.append()用于将元素放入另一个元素（在现有内容之前或之后），但是表不能位于标题元素内。您应该将它们分别单独附加到正文：

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

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元素，则最好为该元素分配唯一的ID或特定的类：

<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

这里有两件事。首先，H2元素在“ prepending”时不存在。第二，替换整个东西，同时添加H2和表格将更有意义。其他选择，如果您已经拥有H2元素，请使用jQuery .after，更加简单。.http://api.jquery.com/after/

如何将数据添加到特定的h2标签？

4 个答案: