代码之家 › 专栏 › 技术社区 › user3683976

如何将数据前置到特定的h2标记?

csv ajax html jquery

user3683976 · 技术社区 · 6 年前

我有一个从csv文件加载数据的ajax脚本。然而,我很难将它预先设置为一个特定的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>Test</h2>').prepend(table)

不知道为什么它不起作用。知道为什么它不在给定的h2标记前加前缀吗?

4 回复 | 直到 6 年前

JustH 6 年前

您的代码无法工作,因为您使用了不正确的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>

Barmar 6 年前

.prepend() 和 .append() 是用来放置元素的 在…内 另一个元素(在现有内容之前或之后),但表不能位于heading元素内。您应该将它们分别附加到正文中:

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

Twisty 6 年前

考虑使用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")

根据你制作多少张表,你可以考虑把这个移动到一个函数:

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);

希望有帮助。

Merak Marey 6 年前

http://api.jquery.com/after/