显示 JQuery 对象的输出答案

【问题标题】：Displaying the output of JQuery objects显示 JQuery 对象的输出
【发布时间】：2018-12-31 11:15:32
【问题描述】：

我似乎无法将一些对象提取到表中并输出结果。我想捕获一些 jQuery 对象的结果。

我需要获取 Title、Description 和 Link 对象的结果，并将它们扔到 for 循环中，并使用表结构显示它们。我好像完全看不懂。

我已成功从 Title、Description 和 Link 中提取数据，所以现在我只需要弄清楚如何使用 HTML 显示它。

我们将不胜感激。

这是我的目标输出：

这是我的 roadmap.js 文件中的代码：

$(document).ready(function(){
    $pnp.setup({
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    });

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z){
        console.log(z);
        var result = z.results.map(a => ({
            Title: `${a.Title}`,
            Description: `${a.Description}`,
            Link: `${a.Link}`
            })
        );
        console.log(result);
        roadMapDisplay(result);
    })

    function roadMapDisplay(result) {
        var head = result.Title;
        var desc = result.Description; 
        var link = result.Link;

        var table = $('<table/>');
            for(var i = 0; i < 2; i++) {
                table.append('<tr/>').append('<td>' + head + '</td>');
                table.append('<tr/>').append('<td>' + desc + '</td>');
                table.append('<tr/>').append('<td>' + link + '</td>');
        }
        $('.Title').append(table);
    } 
});

这是我在 roadmap.txt 中调用 html 的方式

<div class="Title"></div>

<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>

【问题讨论】：

jQuery 的 .append() 应该被赋予完整的节点，而不是 HTML 字符串片段。例如，追加 <tr> 元素，然后追加 <td> 元素。
此外，您通常不需要在 <h1> 和 <p> 等块之后使用 <br> 元素。我建议使用 CSS 来控制它们的垂直边距
这样的？ table.append('').append('' + head + '');?
是的，这是在正确的轨道上，但您需要保留对 <tr> 变量的引用，以便添加其他 <td> 元素。此外，它将是 .append('<tr/>') 或 .append('<tr></tr>')
我继续对原始代码进行了一些更新，我删除了所有
和

标记，因为稍后我将在 HTML 中使用它们并且我对表格进行了更改.append，让我知道这是否是正确的方向。

function roadMapDisplay(result) { $('.Title').append('<table>' + result.reduce( (a, e) => a + `<tr><td><h1>${e.Title}</h1></td> <td>${e.Description}</td> <td>${e.Link}</td></tr>`, '' ) + '</table>' ) }

$(document).ready(function(){ $pnp.setup({ baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training" }); $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(items) { console.log(items); var result = items.map(item => { return { Title: item.Title, Description: item.Description, Link: item.Link } }); var $table = roadMapDisplay(result); console.log($table); document.getElementById('title').innerHTML = $table.innerHTML; }); function roadMapDisplay(items) { var table = $('<table/>'); items.forEach(item => { table.append('<tr/>'); table.append(`<td>${item.Title}</td>`); table.append(`<td>${item.Description}</td>`); table.append(`<td>${item.Link}</td>`); }); return table; } });