使用css创建具有跨越行的结构的表

时间：2017-04-27 04:21:05

标签： javascript jquery html css

我需要使用css并使用JSON数组动态创建一个表。

这样的事情：   在这里，我刚刚通过了一个跨越一类“跨越式”的小区。 ，我还没上课。 这只是一个样本。在做这样的课时我需要帮助。

var div="<div>";
    for(var i=0;i<myArr.length;i++) {     
        var arrHobies = myArr[i]['Hobbies'];
        var arrSkills = myArr[i]['Skills'];
        var arrLanguage = myArr[i]['Language'];
         div+="<div>";
         div+="<div class='spannedrow'>"+myArr[i]['Id']+"</td>";
         div+="<div class='spannedrow'>"+myArr[i]['Name']+"</td>";
         div+="<div class='spannedrow'>"+myArr[i]['Age']+"</td>";
         for(var j=0;j<arrHobies.length;j++ ) {
              div+="<div class='singlerow'>"+arrHobies[j]['HobbyId']+"</td>";
              div+="<div class='singlerow'>"+arrHobies[j]['HobbyName']+"</td>";
         }
          for(var l=0;l<arrSkills.length;l++ ) {
              div+="<div class='singlerow'>"+arrSkills[l]['SkillId']+"</td>";
              div+="<div class='singlerow'>"+arrSkills[l]['SkillName']+"</td>";
         }
         var div+="</div>"
    }
var div+="</div>" ;

我的数组如下所示。

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'Id': 7,
      'Name': 'English'
    }]
  }
]

我的下面数组的表格看起来像this

有没有办法用css样式来跨行？

我正在添加一些真实的动态数据。

 var myArr = [
            {
                "ItemMasterNumber":"290015","IM_Description":"XXX5","IM_FirstProcessDate":"10-19-2016",
                "IM_Alias":"test"                
                "ItemFeatureSet":
                        [{"FS_Id":"2002","FS_Code":"XXX5","FS_Name":"XXX5","FS_Description":"XXX5"}],
                "ItemFeatures":
                      [{"FE_Id":"1864","FE_Value":"VERSION","FE_Name":"2017"},
                       {"FE_Id":"1865","FE_Value":"EDITION","FE_Name":"Deluxe"}],
                "ItemCharges":[
                    {"CH_ChargeId":"23004746","CH_Name":"XXX5","CH_Description":"",
                        "CH_Type":"One Time"
                     }],
                "ItemChargeAttributes":[
                         {"CA_Id":"1628","CA_ListPrice":"99","CA_FairValueBasis":"BESP"}],
                "ItemPackages":[{"PA_PackageId":"21004482"}],
                "ItemPackagesComponents":[{"PA_Id":"9189","PA_Type":"Feature Set"},{"PA_Id":"9190","PA_Type":"Charge"}],
                "ItemOffers":[{"OF_OfferId":"20003880","OF_Name":"XXX5"}],
                "ItemOffersComponents":[{"OC_Id":"3877","OC_Quantity":"","OC_AdjustmentAmount":""}]
            }];

使用上面的真实数组我尝试了下面的代码，但是混合了一些数据。

<html>
  <head>
    <title>TODO supply a title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $( document ).ready(function() {
        var myArr = [
            {
                "ItemMasterNumber":"290015","IM_Description":"XXX5","IM_FirstProcessDate":"10-19-2016",
                "IM_Alias":"test"                
                "ItemFeatureSet":
                        [{"FS_Id":"2002","FS_Code":"XXX5","FS_Name":"XXX5","FS_Description":"XXX5"}],
                "ItemFeatures":
                      [{"FE_Id":"1864","FE_Value":"VERSION","FE_Name":"2017"},
                       {"FE_Id":"1865","FE_Value":"EDITION","FE_Name":"Deluxe"}],
                "ItemCharges":[
                    {"CH_ChargeId":"23004746","CH_Name":"XXX5","CH_Description":"",
                        "CH_Type":"One Time"
                     }],
                "ItemChargeAttributes":[
                         {"CA_Id":"1628","CA_ListPrice":"99","CA_FairValueBasis":"BESP"}],
                "ItemPackages":[{"PA_PackageId":"21004482"}],
                "ItemPackagesComponents":[{"PA_Id":"9189","PA_Type":"Feature Set"},{"PA_Id":"9190","PA_Type":"Charge"}],
                "ItemOffers":[{"OF_OfferId":"20003880","OF_Name":"XXX5"}],
                "ItemOffersComponents":[{"OC_Id":"3877","OC_Quantity":"","OC_AdjustmentAmount":""}]
            }];
console.log(JSON.stringify(myArr));
// Assuming it's not going to be empty
var headers = ["Item Number", "Description", "First Process Date", "Alias", "Master Price", "Product Id", "Product Description",
    "FeatureSet #","Feature Set Code","Name","Description","Enablement Type",
    "Feature Id","Value","Name",
    "Charge Id","Name","Description","Type",
     "Record Id","List Price","Fair Value Basis","Fair Value Low","Fair Value High","Effective SD",
    "Package Id",
    "Record Id","Component Type",
    "Offer Id","Name","Description","Type","Level","Effective SD",
    "Record Id","Quantity","Adjustment Amt"

    ];

var containers = ["ItemFeatureSet", "ItemFeatures", "ItemCharges",
    "ItemChargeAttributes",
    "ItemPackages","ItemPackagesComponents","ItemOffers",
    "ItemOffersComponents"];

for (let header of headers)
{
    console.log('Ok');
    console.log('${header}')
  $("#headers").append(`<th>${header}</th>`);
}

// foreach item
for (let group of myArr)
{
  let span = 1;

  // Sets the length of row span
  for (let container of containers)
  {
    span = group[container].length > span ? group[container].length : span;
  }

  // for the first/main row of each item
  let temp_tr = $("<tr>");
  for (let item in group)
  {
    // Checking if key is array
    if (Array.isArray(group[item]))
    {
      let insert_value = "";
      //If it is greater than 0 use value
      if (group[item].length)
      {
        let temp_keys = Object.keys(group[item][0]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][0][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }

      $(temp_tr).append(insert_value);
    }
    else
    {
      $(temp_tr).append(`<td rowspan=${span}>${group[item]}</td>`);
    }

  }
  // Add to tbody
  $("#body").append(temp_tr); 


  // for each inner item
  for (let i = 1; i < span; i++)
  {
    let temp_tr = $("<tr>");

    for (let item of containers)
    {
      let insert_value = "";

      // Only add values if there are any
      if (i < group[item].length)
      {
        let temp_keys = Object.keys(group[item][i]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][i][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }
      $(temp_tr).append(insert_value);  
      $("#body").append(temp_tr);
    }

  }


}
 });
    </script>
  </head>
  <body>
      <table id="mytable" border=1>
  <thead>
    <tr>
      <th colspan=7></th>
      <th colspan=5>Feature Set Related Data</th>
      <th colspan=3>Features Related Data</th>
      <th colspan=4>Charges Related Data</th>
      <th colspan=6>Charge Attribute Related Data</th>
      <th colspan=1>Package Related Info</th>
      <th colspan=2>Package Component Related Data</th>
      <th colspan=6>Offer Related Data</th>
      <th colspan=3>Offers Component Related Data</th>
    </tr>
    <tr id="headers">
    </tr>
  </thead>
  <tbody id="body">
  </tbody>
</table>
  </body>
</html>

2 个答案:

答案 0 :(得分：0)

您可以尝试使用table structure，

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'LangId': 7,
      'LangName': 'English'
    }]
  }
];

function getRows(obj,maxRow,id,name){
  var div='';
  if (obj.length || maxRow) {
      div += "<table>";
      obj.length && $(obj).each(function() {
      
          div += '<tr><td width="40%">' + this[id] + '</td><td width="60%">' + this[name] + '</td></tr>';
      });
      if(obj.length<maxRow){
        for(var i=0,l=maxRow-obj.length;i<l;i++){
          div += '<tr><td width="40%">&nbsp;</td><td  width="60%">&nbsp;</td></tr>';
        }
      }
      div += '</table>';
    }
    return div;
}


var div = "<table border='1' style='border:1px solid #000;' cellpadding='0' cellspacing='0' >";
div += '<tr><td colspan="3"></td>' +
  '<td>Hobbies</td><td>Skills</td><td>Languages</td></tr>';
div += '<tr><td>Id</td><td>Name</td><td>Age</td>' +
  '<td><table><tr><td width="40%">Hobby Id</td><td  width="60%">Hobby Name</td></tr></table>'+
  '<td><table><tr><td width="40%">Skill Id</td><td  width="60%">Skill Name</td></tr></table>'+
  '<td><table><tr><td width="40%">Language Id</td><td  width="60%">Language Name</td></tr></table>';
for (var i = 0; i < myArr.length; i++) {
  var arrHobies = myArr[i]['Hobbies'];
  var arrSkills = myArr[i]['Skills'];
  var arrLanguage = myArr[i]['Language'];
  var maxRow=Math.max(arrHobies.length,arrSkills.length,arrLanguage.length);
  div += "<tr>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Id'] + "</td>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Name'] + "</td>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Age'] + "</td>";
  div += '<td>'+
          getRows(arrHobies,maxRow,'HobbyId','HobbyName')+
          '</td>';
  div += '<td>'+
          getRows(arrSkills,maxRow,'SkillId','SkillName')+
          '</td>';
  div += '<td>'+
          getRows(arrLanguage,maxRow,'LangId','LangName')+
          '</td>'; 
  div += "</tr>"
}
div += "</table>";
$(div).appendTo('body');
table {
  border-collapse:collapse;
  width:100%;
}
table table td {
  border: 1px solid black;
  padding:5px;

}
.pad-5{padding:5px}
table table tr:first-child td {
  border-top: 0;
}
table table tr:last-child td {
  border-bottom: 0;
}
table table tr td:first-child {
  border-left: 0;
}
table table tr td:last-child{
  border-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

针对动态数据进行了更新，

var myArr = [{
            "ItemMasterNumber": "290015",
            "IM_Description": "XXX5",
            "IM_FirstProcessDate": "10-19-2016",
            "IM_Alias": "test",
            "ItemFeatureSet": [{
                "FS_Id": "2002",
                "FS_Code": "XXX5",
                "FS_Name": "XXX5",
                "FS_Description": "XXX5"
            }],
            "ItemFeatures": [{
                "FE_Id": "1864",
                "FE_Value": "VERSION",
                "FE_Name": "2017"
            },
            {
                "FE_Id": "1865",
                "FE_Value": "EDITION",
                "FE_Name": "Deluxe"
            }
            ],
            "ItemCharges": [{
                "CH_ChargeId": "23004746",
                "CH_Name": "XXX5",
                "CH_Description": "",
                "CH_Type": "One Time"
            }],
            "ItemChargeAttributes": [{
                "CA_Id": "1628",
                "CA_ListPrice": "99",
                "CA_FairValueBasis": "BESP"
            }],
            "ItemPackages": [{
                "PA_PackageId": "21004482"
            }],
            "ItemPackagesComponents": [{
                "PA_Id": "9189",
                "PA_Type": "Feature Set"
            }, {
                "PA_Id": "9190",
                "PA_Type": "Charge"
            }],
            "ItemOffers": [{
                "OF_OfferId": "20003880",
                "OF_Name": "XXX5"
            }],
            "ItemOffersComponents": [{
                "OC_Id": "3877",
                "OC_Quantity": "",
                "OC_AdjustmentAmount": ""
            }]
        },{
  "ItemMasterNumber": "290015",
  "IM_Description": "XXX5",
  "IM_FirstProcessDate": "10-19-2016",
  "IM_Alias": "test",
  "ItemFeatureSet": [{
    "FS_Id": "2002",
    "FS_Code": "XXX5",
    "FS_Name": "XXX5",
    "FS_Description": "XXX5"
  }],
  "ItemFeatures": [{
      "FE_Id": "1864",
      "FE_Value": "VERSION",
      "FE_Name": "2017"
    },
    {
      "FE_Id": "1865",
      "FE_Value": "EDITION",
      "FE_Name": "Deluxe"
    }
  ],
  "ItemCharges": [{
    "CH_ChargeId": "23004746",
    "CH_Name": "XXX5",
    "CH_Description": "",
    "CH_Type": "One Time"
  }],
  "ItemChargeAttributes": [{
    "CA_Id": "1628",
    "CA_ListPrice": "99",
    "CA_FairValueBasis": "BESP"
  }],
  "ItemPackages": [{
    "PA_PackageId": "21004482"
  }],
  "ItemPackagesComponents": [{
    "PA_Id": "9189",
    "PA_Type": "Feature Set"
  }, {
    "PA_Id": "9190",
    "PA_Type": "Charge"
  }],
  "ItemOffers": [{
    "OF_OfferId": "20003880",
    "OF_Name": "XXX5"
  }],
  "ItemOffersComponents": [{
    "OC_Id": "3877",
    "OC_Quantity": "",
    "OC_AdjustmentAmount": ""
  }]
}];
var table = '<table border="1"><tr>',
        tblArray=[],
        isFirstRow = true;

        for (var i = 0, cols = Object.keys(myArr[0]), l = cols.length; i < l; i++) {
            table += '<th>' + cols[i] + '</th>';
        };
        table += '</tr>';

        tblArray.push(table);
        $.each(myArr, function(index, myObj) {
            table = '<tr>';

            $.each(myObj, function(key, data) {
                isFirstRow = !index;
                if ($.isArray(data)) {
                    if (isFirstRow) {
                        table += '<td><table><tr>';

                        for (var i = 0, cols = Object.keys(data[0]), l = cols.length; i < l; i++) {
                            table += '<th>' + cols[i] + '</th>';
                        }
                        table += '</tr>';
                        isFirstRow=false;
                    } else {
                        table += '<td><table>';
                    }               
                    $.each(data, function(k, val) {
                        table += '<tr>';
                        $.each(val, function(j, v) {
                            table += '<td> ' + v + ' </td>';
                        });
                        table += '</tr>';
                    });
                    table += '</table></td>';
                } else {
                    data = data.trim().length==0 ? '&nbsp;':data;
                    table += '<td> ' + data + ' </td>';
                }


            });
            isFirstRow = false;
            table += '</tr>';
            tblArray.push(table);
        });

        $(tblArray.join()).appendTo('body');

        $('table th').each(function(){
            $(this).text(function(){
                return $(this).text().replace(/([A-Z])/g, ' $1').replace('_',' ')
                // uppercase the first character
                .replace(/^./, function(str){ return str.toUpperCase(); })
        });
    });
table {
  border-collapse: collapse;
  width: 100%;
}

table table td,
table table th {
  border: 1px solid black;
}

.pad-5 {
  padding: 5px
}

table table tr:first-child td,
table table tr:first-child th {
  border-top: 0;
}

table table tr:last-child td,
table table tr:last-child th {
  border-bottom: 0;
}

table table tr td:first-child,
table table tr th:first-child {
  border-left: 0;
}

table table tr td:last-child,
table table tr th:last-child {
  border-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 1 :(得分：0)

这是我的答案。让我知道你不明白的是什么。我可能在某处遗漏了一些验证......但我认为这是一个好的开始。只需使用border css来获得你想要的东西。

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'Id': 7,
      'Name': 'English'
    }]
  }
];

// Assuming it's not going to be empty
var headers = ["Id", "Name", "Age", "HobbyId", "HobbyName", "SkillId", "SkillName", "Id", "Name"];

var containers = ["Hobbies", "Skills", "Language"];

for (let header of headers)
{
  $("#headers").append(`<th>${header}</th>`);
}

// foreach item
for (let group of myArr)
{
  let span = 1;
  
  // Sets the length of row span
  for (let container of containers)
  {
    span = group[container].length > span ? group[container].length : span;
  }
  
  // for the first/main row of each item
  let temp_tr = $("<tr>");
  for (let item in group)
  {
    // Checking if key is array
    if (Array.isArray(group[item]))
    {
      let insert_value = "";
      //If it is greater than 0 use value
      if (group[item].length)
      {
        let temp_keys = Object.keys(group[item][0]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][0][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }
      
      $(temp_tr).append(insert_value);
    }
    else
    {
      $(temp_tr).append(`<td rowspan=${span}>${group[item]}</td>`);
    }

  }
  // Add to tbody
  $("#body").append(temp_tr); 
  
  
  // for each inner item
  for (let i = 1; i < span; i++)
  {
    let temp_tr = $("<tr>");
    
    for (let item of containers)
    {
      let insert_value = "";

      // Only add values if there are any
      if (i < group[item].length)
      {
        let temp_keys = Object.keys(group[item][i]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][i][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }
      $(temp_tr).append(insert_value);  
      $("#body").append(temp_tr);
    }
    
  }

  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" border=1>
  <thead>
    <tr>
      <th colspan=3></th>
      <th colspan=2>Hobbies</th>
      <th colspan=2>Skills</th>
      <th colspan=2>Language</th>
    </tr>
    <tr id="headers">
    </tr>
  </thead>
  <tbody id="body">
  </tbody>
</table>

相关问题
最新问题