javascript - jQuery 将输入元素添加到正确的

Question

我正在尝试实现下图的结果。

如您所见 inputs (中间的框)仅插入属于特定 color_id 的位置和size_id 。

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

由于这不是服务器端问题，尽管我从中检索了信息，因此我创建了一个 JSFiddle example 这样你们就可以看到。

我的问题是如何动态地将颜色与尺寸列相匹配。

Answer 1

您的基本结构是正确的，但您的内部 for 循环逻辑不正确。如果 inputs 对象的 size 属性等于当前 td< 中的 size，您想要添加文本输入 你正在看的，不等于颜色。如果不相等，您需要添加一个空表格单元格。由于您的 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>';
}