如何将带有表格标题的新表格行和列添加到 CSS 表格

Question

我有以下表格格式，希望能够根据用户输入添加新列和新行。

文档的可点击部分基本上由名称列表组成，这些名称将成为每行最左侧的项目。此外，还有第二个可点击区域，应在每行水平添加元素，并在添加新列时添加表头。

例如：

名称列表： [杰夫] [比尔] [弗雷德] [杰克]

要添加到每列的项目列表： [苹果] [橙子] [汽车] [鞋子]

如果选择了 Jeff 和 bill 并且选择了苹果和橙子，则应该更新表格以使其看起来像这样。

[Name] [apples] [oranges]
[jeff] [      ] [       ]
[bill] [      ] [       ]

如果随后选择了另一个项目，它将看起来像这样

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]

此外，如果此时选择了另一个名称，它应该看起来像这样

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]
[fred] [      ] [       ] [     ]

这是html结构的样子：

<form>
    <div id="opTable"> 
        <div class="thead">
            <div class="th first">
                Name
            </div>
            <div class="th">
                clase
            </div>
            <div class="th">
                gold
            </div>
        </div>
        <div class="tbody"> 
            <div class="tr"> 
                <div class="td first">
                    Billy
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
            </div>
        </div>
    </div>
</form>

此外，代码应该能够以相同的方式删除名称和/或项目。我希望我的问题足够清楚。

Answer 1

如果您想清楚地显示表格，那么我建议您也使用table 作为标记。

这也将使将标记呈现为表格变得更加容易:) 通过使用table，将列彼此相邻显示将是一个固有特性。无需 CSS 技巧。

添加另一行将变为（我在这里使用 DOM API，因为如果您的表变大，它比附加字符串更高效）

//Assuming each row has the same nr of columns
var numcols = $('#opTable tr:eq(0) td').length;
var row = document.createElement('tr');

//Insert name
var name_td = document.createElement('td');
row.appendChild(name_td);
name_td.appendChild(document.createTextNode(name));

//fill the rest with empty td's
for (var i=1; i < numcols; i++) {
    row.appendChild(document.createElement('td'));
}

$('#opTable').append(row);

添加一列意味着做一些非常相似的事情，不同之处只是你将<td>附加到每个<tr>：

$('#opTable').find('tr').each(function(i) {
    if (i == 0) {
       $(this).append('<td>' + item + '</td>');  
    }
    else {
        $(this).append('<td/>');
    }
});

Answer 2

由于您使用的是 jQuery，.append() 和/或 .appendTo() 是您想要使用的函数。将它与.each() 循环结合起来，你应该很高兴。