Question

我有一个问题，我创建了一个简单的webpart，它基本上是CRUD OPERATIONS，我想添加一个HTML表格来格式化并显示从READ操作中检索到的结果，这里有一个更好理解的代码：

 function retriveListItem() {
  execute(
    "items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
    "GET",
    "GET",
    null,
    function (data, status, xhr) {
        $("#result").empty();
        var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
        $("#result").append(string);
        string = string = "";
      for (var i = 0; i < data.d.results.length; i++) {
          var item = data.d.results[i];
          string = "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
        $("#result").append(string);
      }
      string = "</table>";
     $("#result").append(string);
    },
    function (xhr, status, error) {
      $("#result").empty().text(error);
    });
}

但是当我在浏览器中呈现页面时，如果我点击F12键，我发现sharepoint会自动添加tbody标签（我还没写过），并且它会自动关闭标签/表格在错误的位置是在浏览器中呈现的代码：

<div id="result">
  <table>
    <tbody>
      <tr>
       <th>Nome</th>
       <th>Cognome</th>
       <th>Indirizzo</th>
      </tr>
    </tbody>
 </table>
<tr>
  <td>Giova</td>
  <td>Nardi</td>
  <td>Viale della Cagna, Verona</td>
</tr>
<tr>
  <td>Antonio</td>
  <td>Petrarca</td>
  <td>Via Camello 31, Rovegna</td>
</tr>
<tr>
  <td>Luca</td>
  <td>Mandelli</td>
  <td>Via Rossini, 32 Cesano Maderno</td>
</tr>
</div>

有人知道为什么吗？有关如何解决该问题的任何想法？非常感谢

Answer 1

您始终可以使用JQuery的after()方法将HTML插入现有表中。由于您已经有了第一个<tr>，因此您可以在第一行之后查看构建的HTML：

// First, put your basic table into #result
$("#result").html('<table id="resulttable"><tr><td>...</td></tr></table>');

// Next build up the necessary rows and columns
for (var i = 0; i < data.d.results.length; i++) {
    // Build up your string as above
}
// Next, poke it into the DOM after the first <tr>
$("#resulttable tr").first().after(string);

您将在下面找到完整的模型。 results数据和填充行的代码显示在页面的<head>部分中。在此之下，在<body>中，表格定义为ID mytab。在填充行的代码中拾取该ID。

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">

    data = { d : {
        results: [
            { Nom: 'nom1', Cognom: 'Cognom1', Indirizz: 'Indirrizz1' },
            { Nom: 'nom2', Cognom: 'Cognom2', Indirizz: 'Indirrizz2' },
            { Nom: 'nom3', Cognom: 'Cognom3', Indirizz: 'Indirrizz3' } ] } };

    $(document).ready(function() {
        for (var i = 0; i < data.d.results.length; i++) {
            item = data.d.results[i]
            str = '<tr><td>' + item.Nom + '</td><td> ' + item.Cognom +
                '</td><td>' + item.Indirizz + '</td></tr>';
            $('#mytab tr').first().after(str);
        }
    });

    </script>
  </head>
  <body>
    <table id="mytab">
      <tr>
        <td>First column</td> <td>Second column</td> <td>Third column</td>
      </tr>
    </table>
  </body>
</html>

Answer 2

在您的代码中，您的字符串变量只是覆盖自身，并且每次都将结果发布到浏览器。每次更新字符串时，不要使用.append（），只需使用string += ....，然后在循环运行后追加，并使用完整的表填充字符串。

Here is a JSFiddle以您的代码为例（大部分时间）。

所以你的代码看起来像是：

function retriveListItem() {
execute(
"items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
"GET",
"GET",
null,
function (data, status, xhr) {
    $("#result").empty();
    var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
    //$("#result").append(string);
    //string = string = "";
    for (var i = 0; i < data.d.results.length; i++) {
      var item = data.d.results[i];
      string += "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
    //$("#result").append(string);
  }
  string += "</table>";
 $("#result").append(string);
},
function (xhr, status, error) {
  $("#result").empty().text(error);
});
}

希望这有帮助！

将HTML表插入sharepoint 2013 webpart脚本

2 个答案: