Question

我有两种不同的数组类型。其中一个字符串数组是另一个对象数组;

stringArray = ["P1", "P2", "P3"];
objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}];

我想将对象数组放到表中。字符串数组元素必须是表头。

如果对象数组P == "P1"将5放入单元格。否则将空单元格排成行。

我尝试了这个，但这放了多个空单元格。

这是我的代码“tKeys”= stringArray，“Ciktilar”= objectArray

var baslikEklendiMi = false;
var satirEkle = function(CalismaTipi, Ciktilar, tKeys)
{
    var satir = '<td>' + CalismaTipi + '</td>';
    $.each(tKeys, function (i, val) {
        if (baslikEklendiMi == false) {
            $("#tblBaslik").append("<th>" + val+ "</th>");
        }

        $.each(Ciktilar, function (j, obj) {
            if (val == obj.P) {
                satir += '<td><b>' + obj.PO+ '</b></td>';
            }
            else {
                satir += '<td></td>';
            }
        });
    });

    baslikEklendiMi = true;
    $("#tblListe").append('<tr>' + satir + '</tr>');
}

Answer 1

您必须像这样更改代码：

var satirEkle = function(CalismaTipi, Ciktilar, tKeys) {
    var satir = '<td>' + CalismaTipi + '</td>';
    $.each(tKeys, function (i, val) {
        if (baslikEklendiMi == false) {
            $("#tblBaslik").append("<th>" + val+ "</th>");
        }
        var emptyCell = false;
        $.each(Ciktilar, function (j, obj) {
            if (val == obj.P) {
                satir += '<td><b>' + obj.PO+ '</b></td>';
            }
            else {
                emptyCell = true;
            }
        });

        if (emptyCell) {
            satir += '<td>-</td>';
        } 
    });

    baslikEklendiMi = true;
    $("#tblListe").append('<tr>' + satir + '</tr>');
}

您应该在空单元格中添加一个字符以使其具有更友好的布局。

一个好的选择是空的html空间 。

希望这有帮助。

Answer 2

获得类似的内容：

|--|--|--|--|
|ct|P1|P2|P3|
|--|--|--|--|
|??|5 |  |10|
|--|--|--|--|

您的代码需要进行五项更改：

1）第7行（下方）：实例化emptyCell，分配false;

2）第9行：将$("#tblBaslik").append("<th>ct</th>")添加到CalismaTipi列帐户

3）第25-27行：将satir += '<td></td>'移到Ciktilar循环之外。

4）第22行：将true分配给emptyCell。

5）第18-19行：重置emptyCell并退出Ciktilar循环。

var stringArray  = ["P1", "P2", "P3"];
var objectArray  = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}];

var baslikEklendiMi = false;
var satirEkle = function(CalismaTipi, Ciktilar, tKeys)
{
    var emptyCell = false;                                // Line 7
    var satir = '<td>' + CalismaTipi + '</td>';
    $("#tblBaslik").append("<th>ct</th>");                // Line 9
    $.each(tKeys, function (i, val) {
        if (baslikEklendiMi === false) {
            $("#tblBaslik").append("<th>" + val+ "</th>");
        }

        $.each(Ciktilar, function (j, obj) {
            if (val == obj.P) {
                satir += '<td><b>' + obj.PO+ '</b></td>';
                emptyCell = false;                         // Line 18
                return false;
            }
            else {
              emptyCell = true;                            // Line 22
            }
        });
        if (emptyCell) {                                   // Line 24
            satir += '<td></td>';
        }
    });

    baslikEklendiMi = true;
    $("#tblListe").append('<tr>' + satir + '</tr>');
};
satirEkle('??', objectArray, stringArray);

您需要在satir += '<td></td>';循环之外移动Ciktilar的原因是因为stringArray列表与objectArray列表不直接对应。您想检查所有stringArray元素以查找匹配项，如果在检查了所有stringArray元素后没有匹配，则写入空单元格。因此，不是在循环中写入satir，而是设置emptyCell标志，并在循环后检查该标志。

JSBin example.

Answer 3

我想使用一种工具，我经常使用它从一个对象或对象数组生成表格HTML。因此，下面的代码将为您生成一个表。泛型data.setUsers(...)函数接受第一个参数中提供的对象数组或多个对象数组。所有对象应具有相同的键（属性），因为这些键用于创建表头（如果第二个参数设置为true），并且这些值用于创建每一行。它将返回HTML表格文本。您可以看到tableMaker函数使用here处的较小尺寸数据。您也可以使用您可能生成的一些样本和简单数据来练习它。

＆＃13;

var imagelist = ["image1.jpg","image2.jpg","image3.jpg"];
var client;

var user = $("#username").val();
var type = $("#type").val();
var description = $("#description").val();

for (var i = 0, len = imagelist.length; i < len; i++) {
    (function(i){ 
      var client = new Object();
      client["user"] = user;
      client["type"] = type;
      client["description"] = description;
      client["yourAvatar"] = imagelist[i];
    })(i)
}

＆＃13;

在javascript或jquery中比较两种不同的数组类型

3 个答案: