dynamically create html table using jquery and bind sharepoint list items in it

Question

I have scenario where i need to bind sharepoint list to the dynamically cretaed html table using jquery and use the jquery file in content editor webpart to show the table in site.Please help me with this regards.I am using sharepoint 2010.I am very new bee to jquery and sharepoint so i have tried something form my side please help me out i ma unable to find way to do it.Thanks in advance

<script type="text/javascript" language="javascript">
    var _clientContext;
    var _web;
    alert("Working")
    //ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");


    function RetrieveListItems() {
        alert("Test");
        _clientContext = new SP.ClientContext.get_current();
        alert(Context);
        _web = _clientContext.get_web();
        alert(web);
        var list = _web.get_lists().getByTitle('Planning Partners');
        alert(list);
       // var camlQuery = new SP.CamlQuery();
        var myquery = new SP.CamlQuery.createAllItemsQuery();
        allItems = list.getItems(myquery);
        _clientContext.load(allItems);
        _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
    }

    function success() {
        var Image = null;
        var Linkurl = null;
        var Title = null;
        //        var sHtml = "";
        alert("success");
        var ListEnumerator = this.allItems.getEnumerator();

        while (ListEnumerator.moveNext()) {

            var currentItem = ListEnumerator.get_current();

            Image = currentItem.get_item('Image');
            Linkurl = currentItem.get_item('Linkurl');
            Title = currentItem.get_item('Title');
            //var tbl = document.createElement("tbl");
            var row = document.createElement("tr");
            var $table = $('<table>');
            $table.append('<caption>MyTable</caption>')
            $table.append('<thead>');
            $table.append('<tr>');

            if (Image != oListItem.get_item('Image')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<image imgurl='" + oListItem.get_item('Image') + "'></Image>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }


            if (Linkurl != oListItem.get_item('Linkurl')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<a target='_blank'  href ='" + oListItem.get_item('Linkurl') + "'>" + oListItem.get_item('Title') + "</a>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            if (Title != oListItem.get_item('Title')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<p>" + Title + "</p>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            $table.append('</tr>');
            $table.append('</thead>');
            tblBody.appendChild(row);
            tbl.appendChild(tblBody);
            body.appendchild(tbl);
        }
    }


    //            sHtml += '<table><tr><td><img src="' + Image + '" height="55px" width="55px"></td><td><table><tr><td valign="top"><div class="fieldsTitle">' + Linkurl + '</div></td></tr><tr><td valign="top">' + Title + '<a href="/">Read More >></a></td></tr><tr><td></td></tr></table></td></tr></table>';

    //        document.getElementById('MainDiv').innerHTML = sHtml;
    //    }

    function failed(sender, args) {
        alert("failed Message" + args.gte_message());
    }
</script>

Answer 1

Below is a sample example which i have created where i am reading the images from image library and displaying the Title of the image in the same. Also on click of it i am redirecting to another page with query string parameters . You can ignore that line.

here is the code for the same.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" language="javascript">
    var _clientContext;
    var _web;
    ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");
    function RetrieveListItems() 
             {
                    _clientContext = new SP.ClientContext.get_current();
                    _web = _clientContext.get_web();
                    var list = _web.get_lists().getByTitle('ImageLibrary');
                    var myquery = new SP.CamlQuery.createAllItemsQuery();
                    allItems = list.getItems(myquery);
                    _clientContext.load(allItems);
                    _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this,                                                         this.failed));
                }
                function success() 
                {
                            var Image = null;
                            var Linkurl = null;
                            var Title = null;
                            pictureArray = new Array();
                            TitleArray=new Array();
                            var TitleCount=0;
                            var pictureCount = 0;                   
                            var txtHTML = "";
                            var ListEnumerator = this.allItems.getEnumerator();
                            while (ListEnumerator.moveNext()) 
                            {
                                     var currentItem = ListEnumerator.get_current();                        
                                     var filename = currentItem.get_item('FileLeafRef');
                                     filename = filename.replace('.', '_');
                                     filename += '.jpg';
                                     var dir = currentItem.get_item('FileDirRef');
                                     filename = dir + '/_t/' + filename;
                                     pictureArray[pictureCount++] = filename;  
                                    Title = currentItem.get_item('Title');
                                    TitleArray[TitleCount++] = Title;
                            }

                                   var result = [];
                                    for(var i=0;i<pictureArray.length;i++)
                                    {
                                       result.push([pictureArray[i],TitleArray[i]]);
                                    }                                                      
                            var row = document.createElement("tr");
                            var j = 0;
                            for(i=0; i<result.length; i++) 
                        {
                            //alert(this.pictureArray[i]);
                                if (j == 0)
                                txtHTML += "<tr>";                                                       
                            var ImageUrl=result[i][0]; 
                            var ImageTitle=result[i][1];
                            var RedirectUrl= SP.ClientContext.get_current().get_url() +"/Myactivites.aspx?@ImageTitle="+ImageTitle;
                            txtHTML += "<td>";                       
                            txtHTML += "<a href='"+ RedirectUrl +"'><image border='none' src='" + ImageUrl + "'></Image></a>" + "</br>" +ImageTitle
                                txtHTML +="</td>";

                                j++;
                                if (j == 3)
                                {
                                    txtHTML += "</tr>";
                                    j = 0;
                                }
                         }
                            $("#tblCustomListData").append(txtHTML);
                    //redirect();               
                }

                function failed(sender, args) {
                    alert("failed Message" + args.gte_message());
                }
            </script>


            <table id="tblCustomListData" border="0">
                <thead>
                    <tr>                                                
                    </tr>
                </thead>
            </table>