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

Question

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

文档的可点击部分基本上由一列名称组成，这些名称将是每行最左边的项目。此外，还有第二个可点击区域，应该在每行添加一个表格标题时增加一个新列。

例如：

名称的列表： [杰夫] [纸币] [佛瑞德] [杰克]

要被添加到每个列项的列表： [苹果] [桔子] [汽车] [鞋]

如果杰夫和法案被选中，苹果和橙子被选中，表应该更新看起来像这样。

[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()循环结合起来，你应该很好走。