Javascript 来自Ajax请求的HTML表

下面是我的HTML表的代码，该表是从一个ajax请求中提取SharePoint列表项创建的。在屏幕截图中，它显示了它的工作方式以及单击按钮后显示的内容。当我加载已经显示的页面时，如何在不必单击按钮的情况下加载表格

其次，由于信息数据是从具有相同项的列表中提取出来的，因此当它从第二个列表中提取时，如何去除标题行。我更希望在侧面有一个列，显示行来自哪个列表

有什么建议吗

$（函数（）{
$（“#btnClick”）。单击（函数（）{
var fullUrl=\u spPageContextInfo.webAbsoluteUrl+“/\u api/web/list/getbytitle（'EmployeeInfo'）/items？$select=头衔、年龄、职位、办公室、教育程度、学位”；
var fullUrl1=_spPageContextInfo.webAbsoluteUrl+“/_api/web/list/getbytitle（'Employee2'）/items？$select=头衔、年龄、职位、办公室、教育程度、学位”；
$.ajax({
url:fullUrl，
键入：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：一旦成功，
错误：onError
});
$.ajax({
url:fullUrl1，
键入：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：一旦成功，
错误：onError
});
函数onSuccess（数据）{
var objItems=数据d.结果；
var tableContent='姓名'+'年龄'+'职位'+'办公室'+'教育'+'学位'+'；
对于（var i=0；i

您的JS代码必须在窗口的加载侦听器上，这意味着当页面加载时

$（函数（）{
addEventListener（'load'，function（））{
var fullUrl=\u spPageContextInfo.webAbsoluteUrl+“/\u api/web/list/getbytitle（'EmployeeInfo'）/items？$select=头衔、年龄、职位、办公室、教育程度、学位”；
var fullUrl1=_spPageContextInfo.webAbsoluteUrl+“/_api/web/list/getbytitle（'Employee2'）/items？$select=头衔、年龄、职位、办公室、教育程度、学位”；
var firstResp=[]；
$.ajax({
url:fullUrl，
键入：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：firstrequestHandler，
错误：onError
});
函数firstrequestHandler（aFirstReqResponse）{
firstResp=aFirstReqResponse；
$.ajax({
url:fullUrl1，
键入：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：一旦成功，
错误：onError
});
}
函数onSuccess（数据）{
数据=第一反应浓度（数据）；
var objItems=数据d.结果；
var tableContent='姓名'+'年龄'+'职位'+'办公室'+'教育'+'学位'+'；
对于（var i=0；i});在html中生成表格

<input type="button" id="btnClick" onclick="load_table_function()" value="Get Employee Information" />

<div id="EmployeePanel">
    <div id="employees" style="width: 100%">
        <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>
            </tbody>
        </table>
    </div>
</div>

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

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

var tableContent='姓名'+'年龄'+'职位'+'办公室'+'教育'+'学位'+'；
对于（var i=0；i
使用document ready，并触发click，$（“#btnClick”）。触发（'click'）或使其成为函数而不是事件，并调用它。第二个原因是您再次创建表，只需将此html添加到html中，并使用$（'#employeeTab tbody'）。追加（tableContent），此处tableContent应仅包含中的数据行loop@AhmedSunny你介意在代码中演示一下吗？Asutosh，非常清晰。你知道如何将第二个列表附加到同一个表中，而不是生成另一个表吗？我已经更新了，基本上合并了来自各自调用的两个响应，然后呈现该表。这会产生一个非常混乱的表，我将更新我的帖子，并发布一个屏幕截图，让您看到它加载了什么。我添加了带有超链接的图片[编辑后]，它告诉我，在我将其加载到脚本编辑器中后，我再次尝试，结果什么都没有，根本没有表。这两个调用是否都返回类似的响应。我尝试实现了这一点，所有结果都是错误的
$(document).ready(function () {
   load_table_function();
}

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