如何将表头添加到使用 jQuery 中的 getJSON() 函数创建的 html 表中

Posted 2023-04-13

【中文标题】如何将表头添加到使用 jQuery 中的 getJSON() 函数创建的 html 表中

【英文标题】：How can I prepend table headers to html table that was created using getJSON() function in jQuery

【发布时间】：2014-11-28 23:10:08

【问题描述】：

我不知道如何将以下 html 代码添加到我使用 jQuery 中的 getJSON 方法生成的 HTML 表中。

这是小提琴：http://jsfiddle.net/point71echo/uno9bfds/1/

要添加的HTML：

<thead>
    <tr>
        <th>Foundation</th><th>Name</th><th>Title</th><th>Department</th><th>Email</th><th>Office Phone</th><th>Cell</th><th>Fax</th><th>Board Title</th><th>Url</th><th>Foundation Type</th>
    </tr>
</thead>

当前使用的代码：

<script type="text/javascript">
$.getJSON( "https://spreadsheets.google.com/feeds/list/1bDcIQjGZ6-gZVoUL-4apB0O1A-VDaEP8gLQbOUwJLuE/od6/public/values?alt=json-in-script&callback=?", function( data ) 
  var items = [];
  $.each( data.feed.entry, function( i, entry ) 

  var logourl = entry.gsx$logourl.$t;
  var foundation = entry.gsx$foundation.$t;
  var name = entry.gsx$name.$t;
  var title = entry.gsx$title.$t;
  var department = entry.gsx$department.$t;
  var email = entry.gsx$email.$t;
  var officephone = entry.gsx$officephone.$t;
  var cell = entry.gsx$cell.$t;
  var fax = entry.gsx$fax.$t;
  var boardtitle = entry.gsx$boardtitle.$t;
  var url = entry.gsx$url.$t;
  var foundationtype = entry.gsx$foundationtype.$t;

  if(foundationtype == "Family Foundation")
    catlink = "<a href='/foundations/family-foundations/'> Family Foundation</a>";
  
  else if(foundationtype == "Community Foundation")
    catlink = "<a href='/foundations/community-foundations/'> Community Foundation</a>";
  

  if (email.match(/mailto:.*/)) 
      var visibleEmail = email.substring(7);
      var newEmail = '<a href="' + email + '">' + visibleEmail + '</a>';
  
  else if(email.match(/[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]*(\.[a-z]2,3)/i))
    var newEmail = '<a href="mailto:' + email + '">' + email + '</a>';
  
  else
    var newEmail = 'No Email found';
  

      //items.push("<table><tr><td>"+url+"</td></tr>");

      //items.push("test");
      items.push("<tr class='rows tablerow "+foundationtype+"2'>");
      items.push("<td style='word-wrap:break-word'>" + foundation + "</td>");
      items.push("<td style='word-wrap:break-word'>" + name + "</td>");
      items.push("<td style='word-wrap:break-word'>" + title + "</td>");
      items.push("<td style='word-wrap:break-word'>" + department + "</td>");
      items.push("<td style='word-wrap:break-word'>" + newEmail + "</td>");
      items.push("<td style='word-wrap:break-word'>" + officephone + "</td>");
      items.push("<td style='word-wrap:break-word'>" + cell + "</td>");
      items.push("<td style='word-wrap:break-word'>" + fax + "</td>");
      items.push("<td style='word-wrap:break-word'>" + boardtitle + "</td>");
      items.push("<td style='word-wrap:break-word'>" + url + "</td>");
      items.push("<td style='word-wrap:break-word'>" + foundationtype + "</td></tr>");
  );

  $( "<table/>", 
    "class": "sortable tableData",
    html: items.join( "" )
  ).appendTo( "#list-view" );
);

</script>

    <div id="list-view"></div> 

我的目标是在开始的 Table 标记之后直接获取 Thead 部分。像这样……

<table class="sortable tableData">
<thead>
    <tr>
        <th>Foundation</th>
        <th>Name</th>
        <th>Title</th>
        <th>Department</th>
        <th>Email</th>
        <th>Office Phone</th>
        <th>Cell</th>
        <th>Fax</th>
        <th>Board Title</th>
        <th>Url</th>
        <th>Foundation Type</th>
    </tr>
</thead>
<tbody>...</tbody>
</table>

【问题讨论】：

为什么不将<thead>, etc., etc. </thead> 设为items 数组中的第一项（作为字符串）？

【参考方案1】：

你在找这个吗？

    $("<table/>", 
        "class": "sortable tableData",
        html: items.join("")
    ).appendTo("#list-view");

    $("table").prepend("<thead> <tr>  <th>Foundation</th><th>Name</th><th>Title</th><th>Department</th><th>Email</th><th>Office Phone</th><th>Cell</th><th>Fax</th><th>Board Title</th><th>Url</th><th>Foundation Type</th> </tr></thead>");

更新 jsfiddle：http://jsfiddle.net/uno9bfds/2/

【讨论】：

我非常接近这一点，但从未完全正确。感谢您提供这个易于实施的解决方案。