php - 如果某些 td 使用 jquery json 数据包含相同的 id，则 Rowspan

标签 php jquery arrays json

我有这样的 table 

===============
|1    |  1|  1|
      |   |===|
      |   |  2|
      |   |===|
      |   |  3|
      =========
      |  2|  1|
      |   |===|
      |   |  2|
      |   |===|
      |   |  3|
===============
|2   |  1|  1|
      |   |===|
      |   |  2|
      |   |===|
      |   |  3|
      =========
      |  2|  1|
      |   |===|
      |   |  2|
      |   |===|
      |   |  3|
==============

how can i make table like this based on database data that will rowspan if the data have same id, using jquery json data ?

EDIT!

this is my ajax function

$.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，它崩溃了

Before

After

我的新 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": []
                }
            ]
        }
    ]
}

最佳答案

我终于找到解决方案了。

如果这个答案有帮助，我会在下面写下我的语法和表格，供其他观众使用

我有三个表，其中一个表与另一个表有关系

旧代码 

$.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文本)，请再次检查我的问题，我已经更新了

关于php - 如果某些 td 使用 jquery json 数据包含相同的 id，则 Rowspan，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45070604/

上一篇：jquery - Ajax 调用同步与异步？

下一篇：php - FancyBox 3 根据窗口和纵横比调整大小

相关文章：

javascript - 使用ajax验证表单字段

jquery - jGrowl - 限制为单个消息

C 删除char数组中的重复字符

php - 我想使用图形对象在 Facebook 上分享我们的应用程序

php - 未捕获的 PDOException 泄露用户名和密码

javascript - 我可以分配对象运算符吗？ "e.g. +, -"

php - 使用 PHP 访问另一个对象内的数组内的对象

php - 如何向 Wordpress 发布按钮添加确认对话框？

php - jquery:可以使用 serialize() 创建带有嵌套数组的 GET 字符串吗？

javascript - 使用 highchart 设置符号标记

©2024 IT工具网  联系我们