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

由于您使用的是jQuery，.append()和/或.appendTo()是您要使用的功能。将其与.each()循环相结合，您应该很高兴。

Answer 2

如果要显示的内容是表格，那么我建议您使用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/>');
    }
});

如何将带有表头的新表行和列添加到CSS表中

2 个答案: