javascript - 来自 Ajax 请求的 HTML 表

Question

下面是我的 HTML 表的代码，该代码是从拉取 SharePoint 列表项的 ajax 请求中创建的。在屏幕截图中，它显示了它的工作原理以及单击按钮后显示的内容。当我加载已经显示的页面时，如何让我的表格加载而无需以这种方式单击按钮？
其次，由于信息数据是从具有相同项目的列表中提取的，因此当它从第二个列表中提取时，我如何摆脱标题行。我宁愿在侧面有一列显示行来自哪个列表。
有什么建议？
Table in Action
AFter edit
/image/IXEWn.png

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<input type="button" id="btnClick" value="Get Employee Information" />
<div id="EmployeePanel">
  <table id='employeeTab' style="width: 100%;" border="1 px">
    <tr>
      <td>
        <div id="employees" style="width: 100%"></div>
      </td>
    </tr>
  </table>
</div>

$(function() {
  $("#btnClick").click(function() {
    var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";
    var fullUrl1 = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree";
    $.ajax({
      url: fullUrl,
      type: "GET",
      headers: {
        "accept": "application/json; odata=verbose"
      },
      success: onSuccess,
      error: onError
    });
    
    $.ajax({
      url: fullUrl1,
      type: "GET",
      headers: {
        "accept": "application/json; odata=verbose"
      },
      success: onSuccess,
      error: onError
    });

    function onSuccess(data) {
      var objItems = data.d.results;
      var tableContent = '<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' + '<td><strong>Age</strong></td>' + '<td><strong>Position</strong></td>' + '<td><strong>Office</strong></td>' + '<td><strong>Education</strong></td>' + '<td><strong>Degree</strong></td>' + '</tr></thead><tbody>';

      for (var i = 0; i < objItems.length; i++) {
        tableContent += '<tr>';
        tableContent += '<td>' + objItems[i].Title + '</td>';
        tableContent += '<td>' + objItems[i].Age + '</td>';
        tableContent += '<td>' + objItems[i].Position + '</td>';
        tableContent += '<td>' + objItems[i].Office + '</td>';
        tableContent += '<td>' + objItems[i].Education + '</td>';
        tableContent += '<td>' + objItems[i].Degree + '</td>';
        tableContent += '</tr>';
      }
      $('#employees').append(tableContent);
    }

    function onError(error) {
      alert('Error');
    }
  });
});

Answer 1

在表格内容下创建表格标题，然后附加到表格。

var tableContent = '<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' + '<td><strong>Age</strong></td>' + '<td><strong>Position</strong></td>' + '<td><strong>Office</strong></td>' + '<td><strong>Education</strong></td>' + '<td><strong>Degree</strong></td>' + '</tr></thead><tbody>';
    
          for (var i = 0; i < objItems.length; i++) {
            tableContent += '<tr>';
            tableContent += '<td>' + objItems[i].Title + '</td>';
            tableContent += '<td>' + objItems[i].Age + '</td>';
            tableContent += '<td>' + objItems[i].Position + '</td>';
            tableContent += '<td>' + objItems[i].Office + '</td>';
            tableContent += '<td>' + objItems[i].Education + '</td>';
            tableContent += '<td>' + objItems[i].Degree + '</td>';
            tableContent += '</tr>';
          }
          $('#employees').append(tableContent);
        }