locked
Display consecutive list items in different TDs of same TR of HTML table RRS feed

  • Question

  • Hi,

    I've a SharePoint list and I need to display its data in an HTML table. List contains 2 fields: Title and Link. I can display both the fields in a single TD using the below code:
    $('<td></td>').append("<a href="+Link+">"+Title+"</a>").appendTo(row);

    The point is, I need to display different list items in different TD of same TR. But, my code is displaying single list item in all TDs of same TR. Please check below with images.

    My requirement is:

    ABC is a list item displaying"Title" which is hyperlinked using "Link" field. DEF, GHI, JKL are other list items. I've written a code which displays like below.

    I am not able to display consecutive list items in different TDs of same TR. The code is mentioned below.

    <script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="../../SiteAssets/jquery.SPServices-2013.01.min.js"></script>


    <script language="javascript" type="text/javascript">
    $(document).ready(function() {

    mytable = $('<table></table>').attr({ id: "basicTable" });
    var rows = 1;
    var cols = 4;
    var tr = [];
      $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "TestFooter",
                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Link' /></ViewFields>",            
                completefunc: function (xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        var title = $(this).attr("ows_Title");
    var url = $(this).attr("ows_Link");

    //Table
    for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
    $('<td></td>').append("<a href="+url+">"+title+"</a>").appendTo(row); 
    $('<td></td>').append("<a href="+url+">"+title+"</a>").appendTo(row);
    $('<td></td>').append("<a href="+url+">"+title+"</a>").appendTo(row);
    $('<td></td>').append("<a href="+url+">"+title+"</a>").appendTo(row);

       }
    console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#testing");
                    });
                }
            });

    });
    </script>

    <div id="testing"></div>

    Can anyone suggest me the mistakes behind the code.


    Kunal



    • Edited by Kunal Basu Monday, September 14, 2015 12:37 PM
    Monday, September 14, 2015 12:35 PM