我喜欢得到一个<ul><li>并使它成为一个很好的表格，我将使用CSS进行设计。
我喜欢使用jQuery进行转换
* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$
on .... -
并用<ul>和表格单元格的第一行与其他行创建一个表头...
页面上可能会有4-5 <ul>个。
要为蛋糕添加糖霜，请将其从最大的收入者分类到最小的收入！
我发现了这个问题：
恰恰相反......但也许是一个好的开始？我不知道，我会检查出来......但仍然把问题广泛开放。
我发现了这个问题：
恰恰相反......但也许是一个好的开始？我不知道，我会检查出来......但仍然把问题广泛开放。
另一个与解决方案有关的问题......
如果我想“删除”并将其替换为表格。
我不喜欢空桌子。
这里是代码......可能没有“优化”但它可以工作
$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();
不不不，因为问题/答案变成了插件并且插件很棒......但是不再起作用......
这是错误...我喜欢在点击事件切换时调用插件（tablerize）并在表格中替换整个UL ...它不会这样做
以下是一小段代码：
<script type="text/javascript">
$(document).ready(function() {
$('#texte > h1').next().hide(500);
$('#texte > h1').click(function() {
$(this > ul).tablerize();
$(this).toggle(500);
});
});
</script>
毫不奇怪它不起作用..我确实搞砸了一些东西......而且我没有运气来调整插件！...
我真的很想保留这段代码：
$("texte").append('<div id="where_my_table_goes"></div>');
$(#where_my_table_goes"></div>').append(table);
$('#my_oddly_formatted_list').remove();
可以成为：
remove the ul
append the div to (this)
put the table into that div
HELP！
它不起作用; 这是完整的页面，也许它会帮助我们看看它应该做什么
http://www.acecrodeo.com/new/04-classement.php
我使用延迟隐藏只是为了看数据是否存在......
按下标题后...表格应该发生，删除旧的ul并用表格替换它，然后滑动它吧
好的..现在有州......
我知道只有编辑答案并张贴...在任何地方都没有更新按钮..
我喜欢给你一个大拇指或任何可以帮助你评价的东西......我只是不知道如何
对于这个问题......我已经准确地发布了你给我的东西..它不起作用......让我们看看链接：http://www.acecrodeo.com/new/04-classement.php
这是错误：它切换标题...
我迷路了！
答案 0 :(得分：10)
如果您的HTML看起来像这样，那么就是这样做的：
<ul id='my_oddly_formatted_list1' class='odd_list'>
<li>Column A|Column B|Column C</li>
<li>Value A1|Value B1|Value C1</li>
<li>Value A2|Value B1|Value C2</li>
<li>Value A3|Value B1|Value C3</li>
<li>Value A4|Value B1|Value C4</li>
</ul>
<ul id='my_oddly_formatted_list2' class='odd_list'>
<li>Column D|Column E|Column F</li>
<li>Value D1|Value E1|Value F1</li>
<li>Value D2|Value E1|Value F2</li>
<li>Value D3|Value E1|Value F3</li>
<li>Value D4|Value E1|Value F4</li>
</ul>
<ul id='my_oddly_formatted_list3' class='odd_list'>
<li>Column G|Column H|Column I</li>
<li>Value G1|Value H1|Value I1</li>
<li>Value G2|Value H1|Value I2</li>
<li>Value G3|Value H1|Value I3</li>
<li>Value G4|Value H1|Value I4</li>
</ul>
然后使用jQuery，您可以编写一个这样的插件：
jQuery.fn.tablerize = function() {
return this.each(function() {
var table = $('<table>');
var tbody = $('<tbody>');
$(this).find('li').each(function(i) {
var values = $(this).html().split('*');
if(i == 0) {
var thead = $('<thead>');
var tr = $('<tr>');
$.each(values, function(y) {
tr.append($('<th>').html(values[y]));
});
table.append(thead.append(tr));
} else {
var tr = $('<tr>');
$.each(values, function(y) {
tr.append($('<td>').html(values[y]));
});
tbody.append(tr);
}
});
$(this).after(table.append(tbody)).remove();
});
};
然后您可以通过以下任何方式调用：
// tablerize all UL elements in the page
$('ul').tablerize();
// only UL elements with class 'odd_list'
$('ul.odd_list').tablerize();
// individually tablerize all the lists
$('#my_oddly_formatted_list1').tablerize();
$('#my_oddly_formatted_list2').tablerize();
$('#my_oddly_formatted_list3').tablerize();
就排序等而言，有许多plugins可用于将此功能提供给表。
您的代码存在以下问题：
$(document).ready(function() {
/*$('#texte > h1').next().hide(1000); */
$('#texte > h1').click(function() {
$(this).tablerize();
/*$(this).next().toggle(500);*/
});
});
我写的tablerize插件需要<ul>元素进行表格化。当您通过this时，您传递的是匹配的h1，而不是<ul>。如果你替换这一行：
$(this).tablerize();
使用此行，它将在标题后面找到UL元素：
$(this).next('ul').tablerize();
它应该按你的意愿工作。
此外：