如何將新表格行和列添加到表格標題到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()循環結合起來，你應該很好走。