使用jQuery json数据，如果某些td包含相同的ID，则为行距 [英] Rowspan if the some td contain same id using jquery json data
本文介绍了使用jQuery json数据，如果某些td包含相同的ID，则为行距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的桌子
===============
|1 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
===============
|2 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
==============
我如何使用jquery json数据基于数据库数据创建这样的表，如果数据具有相同的ID，该表将跨行?
how can i make table like this based on database data that will rowspan if the data have same id, using jquery json data ?
编辑！
这是我的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
到目前为止，我的进步就是这样.我已经使表格完美地工作了，但是当同一tr行的第二个td，td右边还有另一个td时，它就崩溃了
my progress so far is just like this . i have made the table work perfectly but when the second td of the same tr row, td have another td on right them, it got crashed
我的新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": []
}
]
}
]
}
推荐答案
我终于得到了解决方案.
I finally get the solution.
如果此答案有帮助，我会在下面为其他受众写下我的语法和表格
i will write down my syntax and table below for other audience if this answer helpful
我有三个表，一个表与另一个表有关系
I have three table one table with another had relationships
旧代码
$.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')
}
})
之前
之后
我知道这不是最好的解决方案，但是对我来说是有用的，因此，如果有人有更好的解决方案，请分享一下解决方案，真的很感激:)
i know that this is not the best solution, but it's work for me, so if someone had a better solution, really apreciate it if you could share the solution thanks :)
对于我的ajax呼叫响应(json文本)，请再次检查我的问题，我已对其进行了更新
for my ajax call reponse ( json text ), please check my question again, i have updated it
这篇关于使用jQuery json数据，如果某些td包含相同的ID，则为行距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
