用css创建类似跨结行的表结构 [英] Creating table like structure with spanned rows using css
本文介绍了用css创建类似跨结行的表结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
类似于这样：
在这里，我刚刚通过了单元格，使其成为跨越了一班'spannedrow'，我还没有上课。
这只是一个例子。我需要帮助做这样的课程。
var div =< div>;
for（var i = 0; i< myArr.length; i ++）{
var arrHobies = myArr [i] ['Hobbies'];
var arrSkills = myArr [i] ['技能'];
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>; $ r
for（var j = 0; j
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'
}]，
技能：[{
'SkillId'：1，
'SkillName'：'PHP'
}，{
'SkillId'：2，
'SkillName'：'MySQL'
}]，
Language：[{
'LangId'： 2，
'LangName'：'英文'
}，{
'LangId'：3，
'LangName'：'中文'
}]
'，
{
Id：2，
Name：'Mike'，
'Age'：'20'，
'Hobbies'： []，
技能：[]，
语言：[]
}，
{
Id：3，
名称：'查理'，
年龄： '25'，
'Hobbies'：[{
'HobbyId'：5，
'HobbyName'：'Dance'
}，{
'HobbyId'： 6，
'HobbyName'：'Sing'
}，{
'HobbyId'：7，
'HobbyName'：'写'
}]，
技能：[]，
语言：[{
'Id'：7，
'Name'：'English'
}]
}
]
然后我的表格和下面的数组看起来像这个
有没有办法我可以做这与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 ：一次性
}]，
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：费用}]，
ItemOffers：[{OF_OfferId：20003880，OF_Name：XXX5}] bItemOffersComponents：[{OC_Id：3877，OC_Quantity：，OC_Ad justmentAmount：}]
}];
在上面的真实数组中，我尝试了下面的代码，但是混合了一些数据。 b
$ b
< html>
< head>
< title> TODO提供标题< / title>
< meta name =viewportcontent =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：一次
}]，
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））;
//假设它不会是空的
var headers = [项目编号，描述，第一个处理日期，别名，主价格，产品ID， 产品描述，
FeatureSet＃，功能集代码，名称，说明，启用类型，
功能ID，值，名称
收费标识，名称，描述，类型，
记录标识，标价，公允价值基础，公允价值低，高，有效标清，
包装标识，
记录标识，组件类型，
供应标识，名称，描述， ，级别，有效标准差，
记录标识，数量，调整金额
];
var container = [ItemFeatureSet，ItemFeatures，ItemCharges，
ItemChargeAttributes，
ItemPackages，ItemPackagesComponents，ItemOffers，
ItemOffersComponents];
（让标题头）
{
console.log（'Ok'）;
console.log（'$ {header}'）
$（＃headers）。append（'< th> $ {header}< / th>`;
}
// foreach item
for（let myArr）
{
let span = 1;
//设置行跨度的长度
for（let container of containers）
{
span = group [container] .length>跨度 ？ group [container] .length：span;
}
//为每个项目的第一个/主要行
let temp_tr = $（< tr>）;
for（let item in group）
{
//检查key是否为数组
if（Array.isArray（group [item]））
{
let insert_value =;
//如果它大于0，则使用值
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> `）;
$ b //添加到tbody
$（＃body）。append（temp_tr）;
//对于每个内部项目
（let i = 1; i< span; i ++）
{
let temp_tr = $（ < TR> 中）;
for（let container of container）
{
let insert_value =;
//只有在有
的情况下才会添加值if（group
let temp_keys = Object.keys（group [项目] [1]）;
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 =mytableborder = 1>
< thead>
< tr>
< th colspan = 7>< / th>
< th colspan = 5>特征集相关数据< / th>
< th colspan = 3>功能相关数据< / th>
< th colspan = 4>收费相关数据< / th>
< th colspan = 6>与电荷属性相关的数据< / th>
< th colspan = 1>封装相关资讯< / th>
< th colspan = 2>封装元件相关数据< / th>
< th colspan = 6>优惠相关资料< / th>
< th colspan = 3>提供组件相关数据< / th>
< / tr>
< tr id =headers>
< / tr>
< / thead>
< tbody id =body>
< / tbody>
< / table>
< / body>
< / html>
解决方案
这是我的答案。让我知道你不明白。我可能在某处失去了一些验证...但我认为这是一个好的开始。
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'}] ，语言：[{'LangId'：2，'LangName'：'English'}，{'LangId'：3，'LangName'：'中文'}}，{Id：2， ：'Mike'，'Age'：'20'，'Hobbies'：[]，技能：[]，语言：[]}，{Id：3，姓名 年龄：'25'，'爱好'：[{'HobbyId'：5，'Hob byName'：'Dance'}，{'HobbyId'：6，'HobbyName'：'Sing'}，{'HobbyId'：7，'HobbyName'：'Writing'}]，Skills：[]， ：[{'Id'：7，'Name'：'English'}]}]; //假设它不会是emptyvar headers = [Id，Name，Age，HobbyId， HobbyName，SkillId，SkillName，Id，Name]; var containers = [Hobbies，Skills，Language]; for（let header of headers）{$（ ）;} //将foreach itemfor（让myArr组）{let span = 1;}}。append（`th th {$ {header}< / th> //设置（让容器的容器）的行跨度的长度{span = group [container] .length>跨度 ？ group [container] .length：span; } //对于每个项目的第一个/主要行let temp_tr = $（< tr>）; for（let item in group）{//检查key是否是数组if（Array.isArray（group [item]））{let insert_value =; //如果它大于0，则使用值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>`）; }} //添加到tbody $（＃body）。append（temp_tr）; //为每个内部项目（let i = 1; i< span; i ++）{let temp_tr = $（< tr>）; for（let容器项）{let insert_value =;如果有任何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）; $（ ＃体）追加（temp_tr）。 }}}
< script src =https：/ /aa.asp < THEAD> < TR> < th colspan = 3>< / th> < th colspan = 2>爱好< / th> < th colspan = 2>技能< / th> < th colspan = 2>语言< / th> < / TR> < tr id =headers> < / TR> < / THEAD> < tbody id =body> < / tbody>< / table>
I need to use css and dynamically create a table with the JSON array.
Something like this : Here I have just passed the cell to be spanned a class of 'spannedrow' , I don't have the class yet. This is just a sample. I need help in doing such class.
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>" ;
And my array is something like below .
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'
}]
}
]
My table with the below array will then look like this
Is there a way I can do this with css styling to span rows?
I am adding some real dynamic data.
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":""}]
}];
With above real array I tried the below code but is mixing up some data.
<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>
解决方案
Here's my answer. Let me know what you don't understand. I'm probably missing some validation somewhere... but I think it's a good start. And just play around with border css to get what you want.
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>
这篇关于用css创建类似跨结行的表结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
