CODEWITHSUNDEEP
javascriptjqueryfor-loophtml-table
user1788736
user1788736

Reputation: 2845

how to output 3 cells (<td> </td>) per table row for ajax response?

Hi all i am trying to display some divs inside table cells(3 cells in one row )using following code but i keep getting incorrect table with missing data. could any one tell me how to fix this problem and display 3 divs per row.Thanks

Here is the image of correct and wrong output: enter image description here

Full code with sample data:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

function myFunction()
{

alert("inside function");
var response= "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

var json = $.parseJSON(response);
var html='';
var x=0; // x is number of cells per row maximum 2 cells per row

for(i in json)
{

   // create HTML code
       var div = "<div class=\"image\">\n" + 
       "<a href=\"javascript:doIt('" + json[i].ID + "')\">\n" +
       "<img src=\""+ json[i].ImageUrl +"\"  alt=\"\" />"+ json[i].Title +"\n" +
       "</a>\n" +
       "</div>\n";


if(x<3)
{

//alert("1 value of x is:"+x);
html += '<td>'+div+'</td>\n';

//$('#demo > tbody').append(html );
x=x+1;

}else
{
   //go to next row and print </tr><tr>
//alert("2 value of x is:"+x);
   html += '</tr>\n\n<tr>\n';

$('#demo > tbody').append(html);

x=0;
};

$('#demo > tbody').append(html);

};

};

</script>

</head>

<body onload="myFunction()">

<div class="scroller">

Incorrect :<br>
<table id="demo" cellspacing="0" border="1" style="display: visible;">
  <thead>

      <th>A</th>
      <th>B</th>
      <th>C</th>
  </thead>

  <tbody>

  </tbody>
</table>

</div>

</body>
</html>

Upvotes: 1

Views: 456

Answers (2)

Bekir
Bekir

Reputation: 19

In your code, openin tag <tr> is not added to first <td>. You are appending html twice. You need to form correct html then add it to the table after for loop. Also you don't need ';' commas at the end of condition and standart function definition code blocks.

function myFunction() {
  var response = "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

  var json = $.parseJSON(response);
  var html = '';
  var x = 0; // x is number of cells per row maximum 2 cells per row

  for (i in json) {

    // create HTML code
    var div = "<div class=\"image\">\n" +
      "<a href=\"javascript:doIt('" + json[i].ID + "')\">\n" +
      "<img src=\"" + json[i].ImageUrl + "\"  alt=\"\" />" + json[i].Title + "\n" +
      "</a>\n" +
      "</div>\n";


    //alert("x is:"+x);
    div = '<td>' + div + '</td>\n';

    if (x === 0) {
      html += '<tr>' + div;
      x++;
    } else if (x === 1) {
      html += div;
      x++;
    } else if (x === 2) {
      html += div + '</tr>';
      x = 0;
    }

  } //end of for loop

  $('#demo > tbody').append(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="myFunction()">
  <div class="scroller">
    <br>
    <table id="demo" cellspacing="0" border="1" style="display: visible;">
      <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

Upvotes: 1

Matthew Blackett
Matthew Blackett

Reputation: 1

Thought I would offer a different solution.

https://jsfiddle.net/wfc9p0e8/

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<style>
  #table{ display: table; width:100%; }
  #table .table-cell { display: inline-table; width:33.33%;  }
</style>

<div class="scroller">

    <div id="table"></div>

</div><!--scroller-->

<script>

$(document).ready(function(){

var response= "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

$.each(JSON.parse(response), function(i, value){

  var html = '<div class="table-cell"><div class="image"><a href=javascript:doIt("'+ value.ID +'")><img src="'+ value.ImageUrl +'" alt="'+ value.Title +'"></a></div></div>';

  $('#table').append(html);

  })
})//doc ready

</script>

</body>
</html>

Upvotes: 0

Related Questions