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

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

  •  0
  • 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 年前
        1
  •  1
  •   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>
    
        2
  •  0
  •   Barmar    6 年前

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

    $('body').append('<h2>Test</h2>', table);
    
        3
  •  0
  •   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);
    

    希望有帮助。

        4
  •  0
  •   Merak Marey    6 年前