jQueryを使用して1つの行に2つのtdをマージするにはどうすればいいですか？

Question

JSONデータを解析してAJAXを使用してテーブルにロードするためにjQueryを使用していますが、td要素を1行でマージするにはどうすればよいですか？ヘッダーの位置に気にしないでください。私はちょうどデータで心配しています。

マイ結果：

この正しい：

コード：

<script> 
     $(document).ready(function() { 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("FlatType", "Home", new {id = TempData["Id"] })", 
       async: true, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       cache: false, 
       success: function (data) { 
        let $thead = $('#myColumns'), 
         $tr = $('<tr>'); 
        console.log(data); 
        data.data.forEach(col => { 
         $tr.append($('<th>').html(col === null || col === "" ? 0 : col)); 
         console.log(col); 
        }); 

        $thead.append($tr); 
       } 
      }); 

      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("FlatTypeById", "Home", new {id = TempData["Id"] })", 
       async: true, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       cache: false, 
       success: function (data) { 
        let $tbody = $('#myData'); 
        data.data.forEach(row => { 
         let $tr = $('<tr>'); 
         $tr.append(row.map(val => { 
          return $('<td>').html(val === null || val === "" ? 0 : val); 
         })); 
         $tbody.append($tr); 
        }); 
       } 
      }); 
     }); 
    </script> 

JSON配列データ：これはCOLUMNです：

{ 
    "data": [ 
     [ 
      "ID", 
      "TYPE", 
      "TOTAL", 
      "1 bed room", 
      "2 bed room" 
     ] 
    ] 
} 

JSON配列データ：これは、データです：

{ 
    "data": [ 
     [ 
      "100", 
      "Total Transaction Amount", 
      "9812355000", 
      "23397000", 
      "13976000" 
     ], 
     [ 
      "100", 
      "No. of units", 
      "1268", 
      "3", 
      "2" 
     ], 
     [ 
      "100", 
      "(Total sq.ft.)", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Avg. price", 
      "7738450", 
      "7799000", 
      "6988000" 
     ], 
     [ 
      "100", 
      "Avg. sq.ft.", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Max. price", 
      "25494000", 
      "9918000", 
      "7318000" 
     ], 
     [ 
      "100", 
      "Max. sq.ft", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Min. price", 
      "5904000", 
      "6465000", 
      "6658000" 
     ], 
     [ 
      "100", 
      "Min. sq.ft", 
      "", 
      "", 
      "" 
     ] 
    ] 
} 

Answer 1

は、アカウントにデータを取って、返されたオブジェクトは、オブジェクトの配列、情報を含む各オブジェクトです。あなたが望むかもしれない配列を反復することであり、各均等に配置されたオブジェクトがそれを先行するオブジェクトの一部であるとすれば、あなたはできます：

データ[0]は、データ[1]は同じでなければなりませんtd。

あなたは配列を反復処理し、あなたが行うことができますモジュロとインデックスの繰り返しをコントロールしている場合：

for(var i = 1; i < data.length; i++){ 
// data is your ajax data 
// data.length is the total length of the data array 


// pseudo code 

    if(if%2==0) 
// If i % 2 == 0 we are at array position that has an even number, the one you want in the same td 
// push it to previous td container with .html() or some other method 
    my_td_container += "<br />" + data[i-1]; 
// we create a variable that contains the first td data and add to it a breaklike (<br />) and the new td data 

    else 
// else --> this odd data is a new td, it's a new row with new data 
my_td_container = data[i-1]; 
// data[i-1] and not data[i] because the even positions are at odd spots, you can refactor this. 
} 




{ 
    "data": [ 
     [ 
      "100", 
      "Total Transaction Amount", 
      "9812355000", 
      "23397000", 
      "13976000" 
     ], 
     [ 
      "100", 
      "No. of units", 
      "1268", 
      "3", 
      "2" 
     ], 
     [ 
      "100", 
      "(Total sq.ft.)", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Avg. price", 
      "7738450", 
      "7799000", 
      "6988000" 
     ], 
     [ 
      "100", 
      "Avg. sq.ft.", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Max. price", 
      "25494000", 
      "9918000", 
      "7318000" 
     ], 
     [ 
      "100", 
      "Max. sq.ft", 
      "", 
      "", 
      "" 
     ], 
     [ 
      "100", 
      "Min. price", 
      "5904000", 
      "6465000", 
      "6658000" 
     ], 
     [ 
      "100", 
      "Min. sq.ft", 
      "", 
      "", 
      "" 
     ] 
    ] 
} 

Answer 2

私はあなたがグループごとに1つの行を持っていることを、一緒にすべてのグループを合計する意味だと思います。 ソートあなたのデータ、つまり、このようなものです：

group1 
group1 
group1 
group2 
group2 
group2 
group3 
group3 
... 

次に、あなたがコントロールブレークアルゴリズムを使用して、それを反復処理することができます：

var curKey = 0; 
var curRow = myArray[curKey]; 
var newGroup = myArray.someColumn; 
var oldGroup = newGroup; 

while (typeof curRow !== "undefined") { 
    while (newGroup === oldGroup && typeof curRow !== "undefined" { 
     // sum your group here 
     curKey++; 
     curRow = myArray[curKey]; 
     newGroup = myArray.someColumn; 
    } 
    oldGroup = newGroup; 
} 

テストされていないとも前にJavaScriptでやったことがありません。しかし、ええ、私はあなたが感じていると思う。あなたのデータはバックエンドから来ているようです。バックエンドでソートする方が簡単です。

また、この例をオブジェクト指向の方法でより高価（およびソートされていない）にすることもできます。

Answer 3

私はデータによって

var jsonDataType = { 
       "data": [ 
        [ 
         "ID", 
         "TYPE", 
         "TOTAL", 
         "1 bed room", 
         "2 bed room" 
        ] 
       ] 
      } 
      var jsonData = { 
        "data": [ 
         [ 
          "100", 
          "Total Transaction Amount", 
          "9812355000", 
          "23397000", 
          "13976000" 
         ], 
         [ 
          "100", 
          "No. of units", 
          "1268", 
          "3", 
          "2" 
         ], 
         [ 
          "100", 
          "(Total sq.ft.)", 
          "", 
          "", 
          "" 
         ], 
         [ 
          "100", 
          "Avg. price", 
          "7738450", 
          "7799000", 
          "6988000" 
         ], 
         [ 
          "100", 
          "Avg. sq.ft.", 
          "", 
          "", 
          "" 
         ], 
         [ 
          "100", 
          "Max. price", 
          "25494000", 
          "9918000", 
          "7318000" 
         ], 
         [ 
          "100", 
          "Max. sq.ft", 
          "", 
          "", 
          "" 
         ], 
         [ 
          "100", 
          "Min. price", 
          "5904000", 
          "6465000", 
          "6658000" 
         ], 
         [ 
          "100", 
          "Min. sq.ft", 
          "", 
          "", 
          "" 
         ] 
        ] 
       } 
var th = ""; 
     $.each(jsonDataType.data[0], function(index, data){     
      th += "<th>" + data + "</th>";     
     });    
     $('#myColumn').append(th); 

     var array = jsonData.data; 
     var tr; 
     $.each(array, function(i, data){ 
      tr = ""; 
      if(i == 0){ 
       $.each(data, function(j, result){     
        tr += "<td>" + result + "</td>";    
       }); 
       tr += "<tr class='separator' />"; 
      } 
      else{ 
       $.each(data, function(j, result){ 
        result = result === null || result === "" ? 0 : result    
        tr += "<td>" + result + "</td>";    
       }); 
       if(i % 2 == 0) 
       tr += "<tr class='separator' />";               
      } 

      $('#myBody').append("<tr>" + tr + "</tr>"); 
     }) 

Demo