javascript 如何使用 UL 和 li 构建类似表的结构
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6707913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build a table like structure using UL and li
提问by Saurabh Kumar
I want to create a table like structure like the one below
我想创建一个像下面这样的结构表
label1 label2 label3
abc 123 tomo
using UL and LI Html elements.I Don't want to use HTML tables because there is a button which says add new line which adds a new line at runtime. Also I will make the whole list to be rearrangeable buy providing a rearrangeable button.
使用 UL 和 LI Html 元素。我不想使用 HTML 表，因为有一个按钮显示添加新行，在运行时添加新行。此外，我将使整个列表可重新排列，并提供可重新排列的按钮。
采纳答案by Phil
You can float each ulto the left, float:left
您可以将每个浮动ul到左侧，float:left
回答by Knowitall
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-table">
<ul class="d-column">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</body>
</html>
CSS
CSS
.d-table {
min-width: 300px;
min-height: 300px;
background: lightgrey;
display: block;
width: 1px solid red;
}
.d-table ul {
list-style-type: none;
}
.d-column li {
padding: 0px;
display: inline-block;
border: 1px solid blue;
background: grey;
width: 50px;
height: 20px;
}
.d-row li {
padding: 0px;
display: inline-block;
background: lightgrey;
border: 1px solid red;
width: 50px;
height: 20px;
}
In JavaScript you can have a for loop to add more rows. This is just the HTML and CSS.
在 JavaScript 中，您可以使用 for 循环来添加更多行。这只是 HTML 和 CSS。
回答by Satish
Google for grids without tables.
谷歌没有表格的网格。
The idea is to use css styles to layout containers/controls in grid structure.
这个想法是使用 css 样式在网格结构中布局容器/控件。
some links:
一些链接：
http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml
http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml
http://www.alistapart.com/articles/practicalcss/
http://www.alistapart.com/articles/practicalcss/
http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx
http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx
回答by JAiro
you should use table in order to create tables :)
您应该使用 table 来创建表:)
HEre you have a function to add rows to the table
在这里，您有一个向表中添加行的函数
/*
Add a new table row to the bottom of the table
*/
function addTableRow(jQtable){
jQtable.each(function(){
var $table = $(this);
// Number of td's in the last table row
var n = $('tr:last td', this).length;
var tds = '<tr>';
for(var i = 0; i < n; i++){
tds += '<td> </td>';
}
tds += '</tr>';
if($('tbody', this).length > 0){
$('tbody', this).append(tds);
}else {
$(this).append(tds);
}
});
}
you could see it here: http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/
你可以在这里看到它：http: //snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/
