How do I create table using row & col index in jQuery?

Question

My JSON looks like this:-

{
"tblDetails": [{
    "id": 1,
    "rowIndex": 1,
    "colIndex": 1
}, 
{
    "id": 2,
    "rowIndex": 1,
    "colIndex": 2
}, 
{
    "id": 3,
    "rowIndex": 1,
    "colIndex": 4
}, 
{
    "id": 4,
    "rowIndex": 1,
    "colIndex": 6
}
]}

And HTML Structure as below:-

<table id="tblLayout"><tbody> </tbody></table>

I am using jQuery ajax to fetch JSON data.

 $.ajax(
 { 
   url : "/hello/data.json",
   type: "GET",
   success: function(data)
   {
       var tbl  = data.tblDetails;
       tbl.forEach(item)
       {
       var html = item.id;
       $('#tblLayout> tbody > tr:eq('+(item.rowIndex)+') td:eq('+(item.colIndex)+')').append(html);
       }

   },
   error:function(e)
   {

   }
 })

Now how do I append the html at the specified row-col in the table tblLayout.

Kgn-web · Accepted Answer · 2015-12-10 10:21:44Z

1

I am not sure if this is the exact solution but this is what I did for the required layout.

I replaced table with ul as:-

<ul id="tblLayout"></ul>

jQuery ajax

$.ajax(
{ 
url : "/hello/data.json",
type: "GET",
success: function(data)
{
   var tbl  = data.tblDetails;
   tbl.forEach(item)
   {
   var html ="<li class='seat style='position:absolute;top:" + (item.rowIndex * 50) + "px;left:" + (item.colIndex * 50) + "px;'>" + item.id+ "</li>";

   $('#tblLayout>).append(html);

   }
   },
  error:function(e)
  {

  }
  })

answered Dec 10, 2015 at 10:21

Kgn-web

7,64531 gold badges108 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor Danylov · Accepted Answer · 2015-12-09 11:27:00Z

0

You get data from "data.json" in JSON format. Try this:

  $.ajax({
url: "data.json",
type: "GET",
success: function (data) {
  var tbl = JSON.parse(data).tblDetails;
  $.each(tbl, function (k, v) {
    var html = v.id;
    $('#tblLayout> tbody > tr:eq(' + (v.rowIndex) + ') td:eq(' + (v.colIndex) + ')').append(html);
  });

},
error: function (e) {

}

});

answered Dec 9, 2015 at 11:27

Igor Danylov

262 bronze badges

6 Comments

sailens Over a year ago

It would be perfect if you could post the example into an (JSFiddle)[jsfiddle.net] to show it working

Kgn-web Over a year ago

@Igor Danylov... I checked with this...but it doesn't rendered

Igor Danylov Over a year ago

@Chetan Are you want rewrite cell or add "id" to exists text?

Kgn-web Over a year ago

@IgorDanylov.. on page load or intially all I have is empty table <table id='tblLayout'> </table>

Kgn-web Over a year ago

@IgorDanylov..What you think about my ans

|

Collectives™ on Stack Overflow

How do I create table using row & col index in jQuery?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related