抓取表数据并使用jQuery转换为无序列表

Scrape Table Data and convert to an Unordered List with jQuery

本文关键字：转换 无序 列表 jQuery 数据 抓取      更新时间：2023-09-26

>我有一个无法自定义的 SharePoint Web 部件 - 它在到达实际数据表之前生成大量表。

我想使用 jQuery 从每个单元格中抓取数据，并使用带有类的跨度将其添加到列表项中，以便将其样式设置为不是真正的表格数据，但这就是 sharepoint 为我页面中需要的变量提供值的方式;我需要对每一行重复此操作以创建多个列表项。

我观察到数据以 4 个表开头 - 我知道很疯狂，但这就是 MS 布局组件的方式，所以我的目标类似于：

$('table table table table tr td').html();

我想生成一个结构列表：

<ul>
 <li>
  <span class="name">Name</span>
  <span class="points">Points</span>
 </li>
 <li>...
</ul>

呈现的 SharePoint 表是（忽略外部表）的格式如下，我在 Web 部件周围包装一个带有唯一 ID 的 DIV，以帮助确定目标

<div id="uniqueID">
 <table>
    <tr>
        <td>John Doe</td>
        <td>50</td>
    </tr>
 </table>
</div>

希望有人可以帮助如何将其转换为格式化列表

谢谢

如果我理解正确，那么$('table table table table tr td').html()会返回您<div id="uniqueID">...</div>部分。

如果这是正确的，那么您可以使用jquery的map（）函数循环访问原始节点并返回新节点数组。我不知道您确切地从哪个容器获得原始列表，所以我在原始查询中添加了一个占位符 PARENTNODE，您需要对其进行修改。

var ul = $('<ul/>');
var originalItems = $('table table table table tr td', PARENTNODE);
var items = $.map( originalItems, function(i,node){
  var dataCells = $(node).find('table tr td'),
      li = $('<li/>');
  li.append( '<span class="name">'+ dataCells.eq(0).text()+'</span>'  );
  li.append( '<span class="points">'+ dataCells.eq(1).text()+'</span>'  );
  return li;
});
ul.append( items );

当然，您可以通过将地图放入附加项中来使其缩短一点：

...
ul.append( $.map( ... ) )

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div id="uniqueID">
        <table>
            <tr>
                <td>John Doe</td>
                <td>50</td>
            </tr>
            <tr>
                <td>John Doe1</td>
                <td>500</td>
            </tr>
        </table>
    </div>
    <div id="list">
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var str = "<ul>";
        $('tr').each(function (index, responce) {
            str += "<li> <span class='"name'">" + $($($(this).children())[0]).text() + "</span><span class='"points'">" + $($($(this).children())[1]).text() + "</span></li>";
        });
        str += "</ul>";
        $('#list').html(str);
    });
</script>
</html>
您可以使用 SharePoint

2010 的 JavaScript 客户端对象模型从 JavaScript 访问 SharePoint 列表/库数据，而无需分析呈现的 HTML。

在 SharePoint 2010 中，要在页面上运行一些 JavaScript（而不弄乱 SharePoint Designer 或 Visual Studio），您可以：

  1. 将 HTML 和 JavaScript 的组合放在文本文件中
  2. 将文本文件保存到网站上的文档库中
  3. 将内容编辑器 Web 部件添加到希望在其中显示/执行 HTML/JavaScript 的页面
  4. 编辑 Web 部件的属性
  5. 在"内容链接"属性中，可以粘贴文本文件的路径

然后，嵌入式 JavaScript 将在该 Web 部件加载时运行，HTML 将显示在放置它的任何位置。（请注意，SharePoint 2013 引入了脚本编辑器 Web 部件，从而在一定程度上简化了此过程。

作为 JavaScript 客户端对象模型入门的参考，下面是一个准系统示例：

<ul id="PointList"></ul>
<script>
    var pointList = document.getElementById("PointList");
    ExecuteOrDelayUntilScriptLoaded(loadListData,"SP.JS");
    function loadListData(){
        var clientContext = new SP.ClientContext();
        // Replace "Example List" with your list's title below:
        var list = clientContext.get_web().get_lists().getByTitle("Example List");
        var camlQuery = new SP.CamlQuery();
        // use a CAML query to retrieve a set of list items:
        camlQuery.set_viewXml(
            '<View><Query>'+
            '<Where>'+
            //    '<BeginsWith>'+
            //        '<FieldRef Name=''Title'' /><Value Type=''Text''>A</Value>'+
            //    '</BeginsWith>'+
            '</Where>'+
            '<OrderBy>'+
            //    '<FieldRef Name=''Modified'' />'+
            '</OrderBy>'+
            '</Query></View>');
        var items = list.getItems(camlQuery);
        clientContext.load(items);
        clientContext.executeQueryAsync(
            /* code to run on success: */
            Function.createDelegate(this,
                function(){
                    var item, itemEnumerator = items.getEnumerator();
                    while(itemEnumerator.moveNext()){
                        item = itemEnumerator.get_current();
                        // Replace "Title" and "Points" with the 
                        // internal names of your fields below:
                        addHTML(item.get_item("Title"), item.get_item("Points"));
                    }
                }
            ),
            /* code to run on error: */
            Function.createDelegate(this,
                function(sender,args){
                    alert(args.get_message());
                }
            )
        );
    }
    function addHTML(name, points){
        var li = document.createElement("li"),
         nameSpan = document.createElement("span"),
         pointSpan = document.createElement("span");
        pointList.appendChild(li);
        li.appendChild(nameSpan);
        li.appendChild(pointSpan);
        nameSpan.innerHTML = name;
        pointSpan.innerHTML = points;
    }
</script>

我在 CAML 查询中注释掉了 Where 和 OrderBy 子句的内部元素，以便它只按默认顺序抓取所有内容，但您仍然可以看到常规格式。通过更改该 CAML 查询，可以获取筛选的项目子集和/或按特定顺序获取它们。（有关 CAML 语法的更多详细信息，请查看此答案。

以下是一些来自Microsoft的很好的JavaScript参考资料，以供进一步研究：

  • SharePoint 2010 客户端对象模型层次结构和标识
  • JavaScript 对象模型中的常见编程任务
  • JavaScript 类/命名空间参考
相关文章：