Question

我试图在下面找到图像的结果。 enter image description here

正如您所看到的，inputs（中间的方框）只是在属于特定color_id和size_id的位置。

我目前正在通过AJAX检索结果，并且我希望动态地将输入元素添加到右侧<td>。这意味着有些<td>不会被填充（input，但必须填充为空）。

虽然这不是服务器方面的问题，虽然我从中检索了信息，但我创建了一个 JSFiddle example ，所以你们可以看到。

我的问题是如何动态地将颜色与大小列匹配。

Answer 1

你的基本结构是正确的，但你的内部for循环逻辑并不正确。如果size对象的inputs属性等于您正在查看的当前size中的td，则要添加文本输入，不等于color。如果它不相等，则需要添加一个空表格单元格。由于您的input对象不包含有关空数据单元格的信息，因此您需要为下一个要插入的元素ID添加一个计数器：

var element = 0;
for(var i = 0; i <= colors.length - 1; i++)
{
   line += '<tr>';
   line += '   <td>' + colors[i].name + '</td>';

   for (var y = 0; y <= sizes.length - 1; y++) {
       if (inputs[element] && inputs[element].color_id == i+1 && inputs[element].size == sizes[y]) {
            line += '<td><input type="text"/></td>';
            element++;
        } else line += '<td></td>';
    }

   line += '</tr>';
}

Answer 2

这里看一下这段代码：

$(function () {
    var head = ''; // holds thead <th>
    var line = ''; // holds tbody <tr>

    var sizes = ['21', '22', 'M'];

    var colors = [{
        'id': 1,
            'name': 'Blue'
    }, {
        'id': 2,
            'name': 'Yellow'
    }, {
        'id': 3,
            'name': 'Red'
    }];

    var inputs = [{
        'color_id': '1',
            'size': '21'
    }, {
        'color_id': '1',
            'size': '22'
    }, {
        'color_id': '2',
            'size': '22'
    }, {
        'color_id': '2',
            'size': 'M'
    }, {
        'color_id': '3',
            'size': '21'
    }, {
        'color_id': '3',
            'size': 'M'
    }];

    head += '<tr>';
    head += '   <th></th>';

    for (var i = 0; i < sizes.length; i++)
    head += '<th>' + sizes[i] + '</th>';

    head += '</tr>';

    for (var i = 0; i < colors.length; i++) {
        line += '<tr>';
        line += '   <td>' + colors[i].name + '</td>';

        for (var y = 0; y < sizes.length; y++) {
            var testObj = {
                'color_id': colors[i].id.toString(),
                    'size': sizes[y]
            }
            var hasInput = false;
            for (var j = 0; j < inputs.length; j++) {
                hasInput = inputs[j]['color_id'] == testObj['color_id'] && inputs[j]['size'] == testObj['size'];
                if (hasInput) break;


            }

            if (hasInput) {
                line += '<td><input type="text"/></td>';

            } else {
                line += '<td>&nbsp;</td>';
            }
        }

        line += '</tr>';
    }

    $('#myTable thead').append(head);
    $('#myTable tbody').append(line);
});

jQuery将输入元素添加到正确的位置

2 个答案: