Rowspan如果某些td使用jquery json数据包含相同的id
我有这样的表
===============
|1 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
===============
|2 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
==============
如果使用jquery json数据，如果数据具有相同的id，我将如何基于数据库数据创建这样的表？
EDIT！
这是我的ajax功能
$.ajax({
method:'POST',
async:true,
url:"<?php echo base_url()?>dashboard/showTableKondisi",
datatype:'json',
success:function(data){
var json = $.parseJSON(data);
var html = '';
var i;
if(Object.keys(json.data).length > 0){
for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){
var length_data_sebab_new = 0
for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
length_data_sebab_new = Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length;
}
}
var length_data_sebab_new_new = length_data_sebab_new;
var length_data_sebab = (Object.keys(json.data[i].data_sebab).length)-(-1)-(-length_data_sebab_new_new) ;
html+='<tr><td rowspan="'+length_data_sebab+'">'+no+'</td><td rowspan="'+length_data_sebab+'"><button class="btn btn-default" type="button" onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';
for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length)-(-1);
// console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
no2 = x-(-1);
html+='<tr><td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
no3 = y-(-1);
html+='<tr><td>'+no3+'</td><td><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
//
}
html+='</tr>';
}
html+='</tr>';
no+=1;
no2+=1;
no
}
}else{
html+='';
}
$('#kondisi_tabel').html(html);
// $('#s_sub_kondisi').html(html2);
},
error:function(){
alert('tidak dapat membaca database')
}
})
编辑3
到目前为止，我的进展就像这样。我已经使表完美地工作但是当同一行的第二个td，td右边有另一个td时，它就崩溃了 
我的新JSON数据
2017年7月24日更新
{
"data": [
{
"id": "14",
"memo_kondisi": "Kekurangan pekerjaan",
"total_row": "5",
"nilai_temuan": "1.000.000",
"data_sebab": [
{
"id": "15",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": [
{
"id": "25",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "26",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "31",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
}
]
},
{
"id": "16",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": [
{
"id": "34",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "35",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
}
]
}
]
},
{
"id": "15",
"memo_kondisi": "Kekurangan pekerjaan",
"total_row": "2",
"nilai_temuan": "1.000.000",
"data_sebab": [
{
"id": "5",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
},
{
"id": "10",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
}
]
},
{
"id": "16",
"memo_kondisi": "",
"total_row": "2",
"nilai_temuan": "0",
"data_sebab": [
{
"id": "9",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
},
{
"id": "12",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
}
]
}
]
}
1 个答案:
答案 0 :(得分：2)
我终于得到了解决方案。
如果这个答案有用，我会在下面为其他观众写下我的语法和表格
我有三个表一个表，另一个表有关系
旧代码
$.ajax({
method:'POST',
async:true,
url:"<?php echo base_url()?>dashboard/showTableKondisi",
datatype:'json',
success:function(data){
var json = $.parseJSON(data);
var html = '';
var i;
if(Object.keys(json.data).length > 0){
for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){
var length_data_sebab_new = 0
for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
length_data_sebab_new = Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length;
}
}
var length_data_sebab_new_new = length_data_sebab_new;
var length_data_sebab = (Object.keys(json.data[i].data_sebab).length)-(-1)-(-length_data_sebab_new_new) ;
html+='<tr><td rowspan="'+length_data_sebab+'">'+no+'</td><td rowspan="'+length_data_sebab+'"><button class="btn btn-default" type="button" onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';
for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length)-(-1);
// console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
no2 = x-(-1);
html+='<tr><td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
no3 = y-(-1);
html+='<tr><td>'+no3+'</td><td><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
//
}
html+='</tr>';
}
html+='</tr>';
no+=1;
no2+=1;
no
}
}else{
html+='';
}
$('#kondisi_tabel').html(html);
// $('#s_sub_kondisi').html(html2);
},
error:function(){
alert('tidak dapat membaca database')
}
})
新代码
$.ajax({
method:'POST',
async:true,
url:"<?php echo base_url()?>dashboard/showTableKondisi",
datatype:'json',
success:function(data){
var json = $.parseJSON(data);
// var html that will contain tr and table that will add to te table based on id #kondisi_tabel ( i used bootstrap table with id)
var html = '';
var i;
if(Object.keys(json.data).length > 0){
for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){
var length_data_sebab_new = 0
html+='<tr><td rowspan="'+json.data[i].total_row+'">'+no+'</td><td rowspan="'+json.data[i].total_row+'"><button class="btn btn-default" type="button" onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';
for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
// console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
if(x == 1 ){
var tr = '<tr>';
}else{
var tr = '';
}
html += tr;
no2 = x-(-1);
html+='<td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';
if ( Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length == '' ){ var tr = '</tr>'; }else{ var tr = ''; }
html+= tr;
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
no3 = y-(-1);
html+='<td>'+no3+'</td><td><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
}
}
html+='</tr>';
no+=1;
no2+=1;
no
}
}else{
html+='';
}
// this is and id table that will
$('#kondisi_tabel').html(html);
},
error:function(){
alert('function not found')
}
})
<强> BEFORE
<强> AFTER
我知道这不是最好的解决方案，但它对我有用，所以如果有人有更好的解决方案，如果你可以分享解决方案，那真的很赞赏，谢谢：）
对于我的ajax呼叫响应（json文本），请再次检查我的问题，我已经更新了
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？