Create rowspan in the table in Javascript

Question

JSON:

{"12":{"matId":"12","matchdatetime":"22/12<br>23:59","leaguename":"ASIAN CHAMPIONSHIP (IN IRAN)","teamaname":"Chinese Taipei",
            "teambname":"Japan","player":{"1":{"name":"John","playtyID":"7","sb":"1"},"2":{"name":"Mat",
            "playtyID":"4"}}}}

i would like to use json data above to produce table like below by javascript:

Table 1

MY CODE:

var company = {"1":"A","2":"B","4":"C","8":"D"};

var data = {"12":{"matId":"12","matchdatetime":"22/12<br>23:59","leaguename":"ASIAN CHAMPIONSHIP (IN IRAN)","teamaname":"Chinese Taipei",
            "teambname":"Japan","player":{"1":{"name":"John","playtyID":"7","sb":"1"},"2":{"name":"Mat",
            "playtyID":"4"}}}};

var str =[];
var count = $.map(data, function(n, i) { return i; }).length;
        var no = 1;
        str.push('<table width="750px" border="0" cellpadding="1" cellspacing="1" class="om" id="tbl_data" name="tbl_data" >');
        str.push('<tr>');
        str.push('<th>No</th>');
        str.push('<th>date</th>');
        str.push('<th>league</th>');
        str.push('<th>home</th>');
        str.push('<th>away</th>');
        str.push('<th>player</th>');
        $.each(company, function(id, name){
            str.push('<th>'+name+'</th>');
        });
        str.push('<th>function</th>');
        str.push('</tr>');
        if(count > 0){
            $.each(data, function(index, value){ 
                var rowspan =  $.map(value['player'], function(n, i) { return i; }).length;
                if(rowspan > 0){ 
                    str.push('<tr>');
                    str.push('<td rowspan='+rowspan+'>'+no+'</td>');
                    str.push('<td rowspan='+rowspan+'>'+value["matchdatetime"]+'</td>');
                    str.push('<td rowspan='+rowspan+'>'+value["leaguename"]+'</td>');
                    str.push('<td rowspan='+rowspan+'>'+value["teamaname"]+'</td>');
                    str.push('<td rowspan='+rowspan+'>'+value["teambname"]+'</td>');
                    $.each(company, function(id, name){

                    if (value['player'][id] != undefined){

                        str.push('<td rowspan='+rowspan / rowspan+'>'+value['player'][id]['name']+'</td>');
                        str.push('<td rowspan='+rowspan / rowspan+'></td>');
                        str.push('</tr>'); 
                    }else{
                        str.push('<td rowspan='+rowspan+' bgcolor="#FF0000"></td>');
                    }


                    });
                    if(no == "1"){
                        str.push('<td rowspan='+rowspan+'>');

                        str.push('</td>');
                    }
                    no ++;
                    str.push('</tr>');
                }
            });
        }else{
            str.push('<tr>');

            str.push('</tr>');
        }
        str.push('</table>');
        return_data = str.join("");
        $('#matchInfo').css({'top':30,'position':'absolute','text-align':'center'});
        $('#matchInfo').html(return_data);
        $('#matchInfo').show();

But the above code produce the table below:

Table 2

How can i modified my code to produce the table as table 1?? Thank You

Live Demo : http://jsfiddle.net/U453N/32/

If you have multiples of these I'd definitely suggest a javascript template system as opposed to endless pushes as it gets very confusing very quickly - as you're finding out — StudioTime
– StudioTime, Commented Dec 22, 2015 at 12:25
You HTML is not good, your have more TH elements as TD element just simply add som empty TD elements (5) and the will fill the rest. — Rickert
– Rickert, Commented Dec 22, 2015 at 12:31
It's hard to debug when you join string. I suggest you to append object. ie. var table = $('<table/>'); and append tr / td accordingly. — Bhavik Jani
– Bhavik Jani, Commented Dec 22, 2015 at 12:58

Ankit Kathiriya · Accepted Answer · 2015-12-23 06:08:26Z

var company = {
  "1": "A",
  "2": "B",
  "4": "C",
  "8": "D"
};

var data = {
  "12": {
    "matId": "12",
    "matchdatetime": "22/12<br>23:59",
    "leaguename": "ASIAN CHAMPIONSHIP (IN IRAN)",
    "teamaname": "Chinese Taipei",
    "teambname": "Japan",
    "player": {
      "1": {
        "name": "John",
        "playtyID": "7",
        "sb": "1"
      },
      "2": {
        "name": "Mat",
        "playtyID": "4"
      }
    }
  },
  "13": {
    "matId": "12",
    "matchdatetime": "22/12<br>23:59",
    "leaguename": "ASIAN CHAMPIONSHIP (IN IRAN)",
    "teamaname": "Chinese Taipei",
    "teambname": "Japan",
    "player": {
      "1": {
        "name": "John",
        "playtyID": "7",
        "sb": "1"
      },
      "2": {
        "name": "Mat",
        "playtyID": "4"
      },
      "3": {
        "name": "Bhavik",
        "playtyID": "7",
        "sb": "1"
      },
      "4": {
        "name": "Jani",
        "playtyID": "4"
      }
    }
  }
};

var str = [];

str.push('<table>');
str.push('<tr>');
str.push('<th>No</th>');
str.push('<th>date</th>');
str.push('<th>league</th>');
str.push('<th>home</th>');
str.push('<th>away</th>');
str.push('<th>player</th>');
$.each(company, function(id, name) {
  str.push('<th>' + name + '</th>');
});
str.push('<th>Remarks</th>');
str.push('</tr>');
$.each(data, function(index, value) {
  var rowSpan = $.map(value['player'], function(n, i) {
    return i;
  }).length;
  str.push('<tr>');
  str.push('<td rowspan=' + rowSpan + '>' + index + '</td>');
  str.push('<td rowspan=' + rowSpan + '>' + value.matchdatetime + '</td>');
  str.push('<td rowspan=' + rowSpan + '>' + value.leaguename + '</td>');
  str.push('<td rowspan=' + rowSpan + '>' + value.teamaname + '</td>');
  str.push('<td rowspan=' + rowSpan + '>' + value.teambname + '</td>');
  var hasRemarksAdded = false;
  $.each(value.player, function(playId, playObj) {
    var hasValue = false;
    $.each(company, function(id, name) {
      if (playId == id) {
        hasValue = true;
        str.push('<td>' + playObj.name + '</td>');
        $.each(company, function(id1, name1) {
          str.push('<td>Company ' + name1 + ' data</td>');
        });

      }
    });
    if (hasValue) {
      if (!hasRemarksAdded) {
        str.push('<td rowspan=' + rowSpan + '>&nbsp;</td>');
        hasRemarksAdded = true;
      }
      str.push('</tr>');
    }
  });

});
//str.push('</tr>');
str.push('</table>');
return_data = str.join("");
$('#matchInfo').css({
  'top': 30,
  'position': 'absolute',
  'text-align': 'center'
});
$('#matchInfo').html(return_data);
$('#matchInfo').show();

table {
  border: 1px solid green;
}
td,
th {
  background: #dddddd;
  border: 1px solid green;
  padding: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="matchInfo" name="matchInfo"></div>

You forgot to take some variable. It's done now :)

Collectives™ on Stack Overflow

Create rowspan in the table in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related