I have to render dynamic data using javascript which should be displayed as n rows, m columns. I have heard of ill-effects of using tables but cannot justify on my own as to why I should/should-not use tables. Can you reason the best practice in choosing the alternative for the requirement. I at all <ul>
is the alternative, how do I manage to make it look like a table?
我必须使用javascript呈现动态数据,它应该显示为n行,m列。我听说过使用表的不良影响,但我自己无法解释为什么我应该/不应该使用表。你能推断出为需求选择替代方案的最佳实践吗?I at all
-
是另一种选择,我如何使它看起来像一个表?
If I use tables, I cannot animate table rows. Keeping this consideration, please suggest the alternative.
如果我使用表,我就不能对表行进行动画处理。考虑到这一点,请建议另一种选择。
6 个解决方案
#1
9
You should not use tables for layout. It's perfectly reasonable to use tables for tabular data. If you have "n rows" and "m columns", that sounds an awful lot like tabular data and it would be appropriate to use a <table>
.
您不应该使用表进行布局。对于表格数据使用表是完全合理的。如果有“n行”和“m列”,这听起来很像表格数据,使用
As far as "animating" table rows, if by that you mean dynamically adding and removing rows from a table using javascript, that is supported. See the DOM Reference for table methods. It supports operations such as insertRow()
and deleteRow()
.
至于“动画”表行,如果您的意思是使用javascript动态地添加和删除表中的行,则支持这种方法。请参阅表方法的DOM引用。它支持诸如insertRow()和deleteRow()之类的操作。
#2
4
Tables are sementically used for the tabular data, it is bad when you use them for layout purposes. In your case, you can use the tables since you want to show some data and i wonder how you can not animate table rows? Thanks
表在语义上用于表数据,如果将表用于布局目的,那就不好了。在您的例子中,您可以使用表,因为您希望显示一些数据,我想知道为什么您不能对表行进行动画处理?谢谢
See W3C's: Tables in HTML Documents
参见W3C的:HTML文档中的表
#3
2
This is a very common dilemma in the Web developers head. Actually using table sometimes make it easy to create web pages but makes it really difficult when you try to modify them or edit them. Tables should only be used to create tabular data like data-grids or representing lists in a tabular layout. Using the right markup for the right layout makes a lot of semantic sense for the webpage and makes it much more readable. You can check the following links to learn more about the significance of Semantic HTML.
在Web开发人员的头脑中,这是一个非常常见的难题。实际上,使用表有时会使创建web页面变得容易,但当您试图修改或编辑它们时,就会变得非常困难。表应该只用于创建表格数据,如数据网格或在表格布局中表示列表。在正确的布局中使用正确的标记,对网页有很大的语义上的意义,并使其更具可读性。您可以查看以下链接,以了解更多关于语义HTML的重要性。
http://www.communitymx.com/content/article.cfm?cid=0BEA6 http://www.thefutureoftheweb.com/blog/writing-semantic-html
http://www.communitymx.com/content/article.cfm?cid = 0 bea6 http://www.thefutureoftheweb.com/blog/writing-semantic-html
#4
1
The first sentence of your question describes a table so you should render it as a table.
问题的第一句话描述了一个表,因此应该将它呈现为一个表。
Is animating the rows really necessary?
动画行真的有必要吗?
#5
0
It's data. Use tables.
它的数据。用表。
Try this jQuery plugin for formatting your table:
尝试这个jQuery插件来格式化你的表格:
http://tablesorter.com/docs/
#6
0
Tables are the right choice for the situation.
表格是适合这种情况的正确选择。
If you use jQuery, you can animate an li
or a tr
or anything else.
如果您使用jQuery,您可以将li或tr动画。
Here's an example of deleting a row with jQuery:
下面是使用jQuery删除一行的示例:
close_timeout = setTimeout(function() {
$("tr#row_"+id).css("background","red");
$("tr#row_"+id).animate({ opacity: 'hide' }, "slow");
}, 600);
$("tr#row_"+id).remove();
This changes the background to red, hides the tr
, and then removes it from the DOM.
这将背景更改为红色,隐藏tr,然后从DOM中删除它。
I hope this helps.
我希望这可以帮助。
#1
9
You should not use tables for layout. It's perfectly reasonable to use tables for tabular data. If you have "n rows" and "m columns", that sounds an awful lot like tabular data and it would be appropriate to use a <table>
.
您不应该使用表进行布局。对于表格数据使用表是完全合理的。如果有“n行”和“m列”,这听起来很像表格数据,使用
As far as "animating" table rows, if by that you mean dynamically adding and removing rows from a table using javascript, that is supported. See the DOM Reference for table methods. It supports operations such as insertRow()
and deleteRow()
.
至于“动画”表行,如果您的意思是使用javascript动态地添加和删除表中的行,则支持这种方法。请参阅表方法的DOM引用。它支持诸如insertRow()和deleteRow()之类的操作。
#2
4
Tables are sementically used for the tabular data, it is bad when you use them for layout purposes. In your case, you can use the tables since you want to show some data and i wonder how you can not animate table rows? Thanks
表在语义上用于表数据,如果将表用于布局目的,那就不好了。在您的例子中,您可以使用表,因为您希望显示一些数据,我想知道为什么您不能对表行进行动画处理?谢谢
See W3C's: Tables in HTML Documents
参见W3C的:HTML文档中的表
#3
2
This is a very common dilemma in the Web developers head. Actually using table sometimes make it easy to create web pages but makes it really difficult when you try to modify them or edit them. Tables should only be used to create tabular data like data-grids or representing lists in a tabular layout. Using the right markup for the right layout makes a lot of semantic sense for the webpage and makes it much more readable. You can check the following links to learn more about the significance of Semantic HTML.
在Web开发人员的头脑中,这是一个非常常见的难题。实际上,使用表有时会使创建web页面变得容易,但当您试图修改或编辑它们时,就会变得非常困难。表应该只用于创建表格数据,如数据网格或在表格布局中表示列表。在正确的布局中使用正确的标记,对网页有很大的语义上的意义,并使其更具可读性。您可以查看以下链接,以了解更多关于语义HTML的重要性。
http://www.communitymx.com/content/article.cfm?cid=0BEA6 http://www.thefutureoftheweb.com/blog/writing-semantic-html
http://www.communitymx.com/content/article.cfm?cid = 0 bea6 http://www.thefutureoftheweb.com/blog/writing-semantic-html
#4
1
The first sentence of your question describes a table so you should render it as a table.
问题的第一句话描述了一个表,因此应该将它呈现为一个表。
Is animating the rows really necessary?
动画行真的有必要吗?
#5
0
It's data. Use tables.
它的数据。用表。
Try this jQuery plugin for formatting your table:
尝试这个jQuery插件来格式化你的表格:
http://tablesorter.com/docs/
#6
0
Tables are the right choice for the situation.
表格是适合这种情况的正确选择。
If you use jQuery, you can animate an li
or a tr
or anything else.
如果您使用jQuery,您可以将li或tr动画。
Here's an example of deleting a row with jQuery:
下面是使用jQuery删除一行的示例:
close_timeout = setTimeout(function() {
$("tr#row_"+id).css("background","red");
$("tr#row_"+id).animate({ opacity: 'hide' }, "slow");
}, 600);
$("tr#row_"+id).remove();
This changes the background to red, hides the tr
, and then removes it from the DOM.
这将背景更改为红色,隐藏tr,然后从DOM中删除它。
I hope this helps.
我希望这可以帮助。