在Javascript中创建表中的rowspan

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"}}}}

我想使用上面的json数据通过javascript生成如下表：

表1

我的代码：

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();

但是上面的代码产生了下表：

表2

如何修改我的代码以生成表1？谢谢

现场演示： http://jsfiddle.net/U453N/32/

Answer 1

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>

你忘了带一些变数。 现在已经完成了：）