1

我真的很讨厌 javascript，但你必须学习。我试图通过一个 json 字符串循环来构建一个表。它正在工作（有点）。但是一件是行不通的。我尝试循环遍历一组布尔值。如果是真的，添加一个带有文本“yes”的列，如果它是假的，添加一个带有“no”的列。但那部分行不通。它根本不会添加任何值！

非常感谢我的代码的其他建议：

var jsonstr = '{"no_of_places": 4, "teams": {"Player 1": {"done": [true, true, true, false], "time": null},    "Player 2": {"done": [true, true, true, true], "time": "0 dagar 1:10:21"}, "Player 3": {"done": [true, true, true, true], "time": "0 dagar 2:47:34"}}}';

$(document).ready(function () {
    var result = jQuery.parseJSON(jsonstr);
    var theadTr = $('.scorestable thead tr');

    theadTr.append('<th>Team</th>');
    // Adds one header for each place
    for (var i = 0; i < result.no_of_places; i++) {
        theadTr.append('<th>' + (i + 1) + '</th>');
    }

    // Add teams and their result.
    $.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td><td>'];
        // Add if place is found or not.
        $(this.done).each(function () {
            if (this === true) {
                row.concat(['<td>yes</td>']);
            } else {
                row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');
    });
});

简单的 HTML 模板：

<p></p>
<table class="scorestable">
    <thead>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

提示（或自我注释，如果你愿意）

  1. 我真的从 Kevin B 的这个简单片段中学到了很多：

    $.each(["foo","bar","foobar"],function(i,val){
   console.log(typeof this,typeof i,typeof val); 
 });

 // OUTPUTS:
 // ========
 // object number string
 // object number string
 // object number string

  2. 数组在 javascript 中是不可变的（如果我使用错误的术语，请编辑）。

    // So instead of:
origArray.concat(['more', 'values']);

// I need to write:
origArray = origArray.concat(['more', 'values']);
4

5 回答 5

2

您添加了额外的 td JSFIDDLE

$.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td>']; // extra td
        // Add if place is found or not.
        $(this.done).each(function () {
            if (this === true) {
                row = row.concat(['<td>yes</td>']);
            } else {
                row = row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');
    });
于 2013-04-11T20:09:22.047 回答
1

您需要在 == 上更改 ===，因为这是布尔对象，并且此 === 始终为真。

试试这个代码：

if (this == true) {
  row.concat(['<td>yes</td>']);
} else {
   row.concat(['<td>no</td>']);
}
于 2013-04-11T20:16:54.730 回答
1

我建议不要this在 $.each 内部使用，这与您所期望的不完全一样。

http://jsfiddle.net/EzTL7/

相反，使用您命名的第二个参数value

 $.each(result.teams, function (index, value) {
    var row = ['<tr><td>', index, '</td>'];
    // Add if place is found or not.
    $(value.done).each(function () {
        if (this === true) { // `this` is ok here because you're using $.fn.each and not $.each
            row.concat(['<td>yes</td>']);
        } else {
            row.concat(['<td>no</td>']);
        }
    });

    $('.scorestable tbody').append(row.join('') + '</tr>');
});
于 2013-04-11T20:16:57.173 回答
1

干得好。each() 方法需要一个索引和值。该值是您的布尔值。

 // Add teams and their result.
$.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td>']; // extra td
        // Add if place is found or not.
        $(this.done).each(function (index, value) {
            if (value === true) {
                row = row.concat(['<td>yes</td>']);
            } else {
                row = row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');

    });

经过测试和工作

于 2013-04-11T20:21:42.863 回答
1

您应该$.each用于迭代数组。

   $.each(this.done, function (i, v) {
        if (v === true) {
            row = row.concat(['<td>yes</td>']);
        } else {
            row = row.concat(['<td>no</td>']);
        }
        console.log(row);
    });

而你使用concat错误的方式。concat不会改变被调用者的值，而是应该使用返回值：

row = row.concat(['<td>yes</td>']);

您的代码的工作示例。

于 2013-04-11T20:24:22.143 回答