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

发布于 2024-11-30 18:51:58 字数 1797 浏览 1 评论 0原文

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

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

例如：

姓名列表： [Jeff] [bill] [fred] [jake]

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

如果选择了杰夫和比尔并且选择了苹果和橙子，则表应该更新为这样。

[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>

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

原文

I have the following table format and would like to be able to add new columns and new rows based on user inputs.

The clickable part of the document basically consists of a list of names that will be the far left item of each row. Additionally there is a second clickable area that should add elements horizontally to each row adding a table header as it adds a new column.

For example:

List of names:
[Jeff] [bill] [fred] [jake]

List of items to be added to each column:
[apples] [oranges] [cars] [shoes]

If Jeff and bill were selected and apples and oranges were selected the table should be updated to look as such.

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

If then another item was selected it would look as such

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

Additionally if another name was selected at this point it should look as such

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

This is what the html structure looks like:

<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>

Additionally, the code should be able to remove a name and or item in the same ways. I hope my question is clear enough.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

杯别 2024-12-07 18:51:58

如果您想清楚地显示的是表格，那么我建议也使用 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);

添加列意味着做一些非常相似的事情，区别只是你附加一个到每个：

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

If what you want to display clearly is a table, then I would suggest to also use a table for the markup.

This will also make rendering the markup as a table a lot easier :) By using a table, displaying the columns next to each other will be an inherent feature. No CSS trickery needed.

Adding another row will become (I use DOM API here because it's more performant than appending strings if your table gets large)

//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);

Adding a column means doing something very similar, the difference is just that you append a <td> to each <tr>:

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

回复收藏 0 原文