14

我需要在 SharePoint 2010 中创建导航 Web 部件。我使用表格来显示 SharePoint 列表中的项目，表格的结构如下：

Column1 = 要显示的文本 (Title) Column2 = URL (TitleLink)

我似乎无法弄清楚如何创建<a href></a>标签并将变量放在适当的位置。我不断得到的结果只是标签中的 HTML 标记<th>。我在谷歌上搜索了很多地方，还没有找到一个好的答案。

下面是在打印带有变量的表头方面工作得很好的代码。但是，在该打印文本 ( theHeaderText) 后面我想在其后面放置一个链接，以便当用户单击时，它会转到该链接。

var siteUrl = '/sites/dev/';
var theCounter = 0;
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

function retrieveListItems() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull>    <IsNotNull><FieldRef Name='TitleLink' /></IsNotNull></And></Where>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),     Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) 
{
var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) 
    {
    var oListItem = listItemEnumerator.get_current();

    //Each column in in the SharePoint List will essentially become an array.
    //So make an array for each column that will be returned!

    var theHeaders = new Array();
    var HeaderLinks = new Array();
    theCounter += 1;
    theHeaders[theCounter - 1] = oListItem.get_item('Title');
    HeaderLinks[theCounter - 1] = oListItem.get_item('TitleLink');

    //Get the Table Element created in HTML
    var getTheTableTag = document.getElementById('theTable');


    //Create the headers (top level links)
    var createTheHeaderElements = document.createElement('th');
    createTheHeaderElements.id = 'headerTag';
    var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]);
    createTheHeaderElements.appendChild(theHeaderText);
    getTheTableTag.appendChild(createTheHeaderElements);

};
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
4

3 回答 3

28

像这样使用setAttribute：

        var createA = document.createElement('a');
        var createAText = document.createTextNode(theCounter);
        createA.setAttribute('href', "http://google.com");
        createA.appendChild(createAText);
        getTheTableTag.appendChild(createA);

一个更具交互性的例子：

const insertButton = document.getElementById('insertButton');

const appendAnchorTag = () => {
  const anchor = document.createElement('a');
  const list = document.getElementById('linksList');
  const li = document.createElement('li');
  anchor.href = 'http://google.com';
  anchor.innerText = 'Go to Google';
  li.appendChild(anchor);
  list.appendChild(li);
};

insertButton.onclick = appendAnchorTag;
<button id="insertButton">Create New Anchor Tag</button>

<ul id="linksList"></ul>

于 2013-08-29T01:27:00.287 回答
3

感谢 mwilson

这是另一个代码示例

改变 

<body>  to  <body id="myBody">

添加到您的身体： 

<button onclick="outputFunction()" >click me</button>

然后在body外面添加一个脚本

<script type="text/javascript">

function outputFunction() {
    var myBodyId = document.getElementById("myBody");   
    var newBaitTag = document.createElement('a');
    var newBaitText = document.createTextNode("Bonus Click");
    newBaitTag.setAttribute('href', "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
    // we create new things above

    // we append them to the page body below
    newBaitTag.appendChild(newBaitText);
    myBodyId.appendChild(newBaitTag);    
}

</script>
于 2017-04-21T19:59:56.573 回答
1

您可以使用 td 而不是 th 因为链接默认为粗体：

    var createTheHeaderElements = document.createElement('td');
    createTheHeaderElements.id = 'headerTag';
    var link = document.createElement('a');
    var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]);
    link.setAttribute("href","www.google.com");
    link.appendChild(theHeaderText);
    createTheHeaderElements.appendChild(link);
    getTheTableTag.appendChild(createTheHeaderElements);
于 2013-08-29T01:39:56.740 回答