如何使用jQuery僅在一行中合並2個td？

Question

我正在使用jQuery解析JSON數據並使用AJAX加載到表中，但是如何使td元素僅合並在一行中？ 不要介意標題，我只是擔心數據的位置。

我的結果：

這是正確的：

碼：

<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數組數據：這是列：

{
    "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

我認為您的意思是將所有組加在一起，每組一行。 對數據進行排序，就像這樣：

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 2

考慮到您的數據，返回的對象是一個對象數組，每個對象都包含信息。 您可能想要的是遍歷數組，並假設每個均勻放置的對象都是位於該數組之前的對象的一部分，您可以執行以下操作：

Data [0]位於中，Data [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 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>"); 
        })

演示版