我喜欢得到一个<ul><li>并使其成为一个漂亮的表格，我将使用 CSS 对其进行样式设置。
我喜欢用 jQuery 进行转换
* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$
不断地......
并用 <ul> 的第一行制作一个表头以及表格单元格与其他单元格...
可能会有 4-5 <ul>页面上有 s。
为了锦上添花，让我们按照收入最高的到最低的顺序排序!
<小时/>我发现了这个问题:
这完全相反......但也许是一个好的开始？我不知道，我会检查一下...但问题仍然悬而未决。
<小时/>我发现了这个问题:
这完全相反......但也许是一个好的开始？我不知道，我会检查一下...但问题仍然悬而未决。
<小时/>与解决方案相关的另一个问题...
如果我想“删除”并将其替换为表格..
我不喜欢做一个空 table ..
这是代码......也许没有“优化”，但它可以工作
$('#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
我还需要一个 div 吗？
救命!
<小时/>这不起作用； 这是完整的页面，也许对了解它应该做什么有很大帮助
http://www.acecrodeo.com/new/04-classement.php
我使用延迟来隐藏只是为了看看数据在那里......
按下标题后..应该发生表格化，删除旧的 ul 并将其替换为表格，然后滑动它
<小时/>好的..现在有状态了...
我只知道编辑答案并发布它...任何地方都没有更新按钮..
我喜欢给你点赞或者任何可以帮助你评分的东西......我只是不知道如何
对于这个问题...我已经准确地发布了您给我的内容..但它不起作用...让我们看看链接:http://www.acecrodeo.com/new/04-classement.php
这是错误:它切换标题...
我迷失了!
最佳答案
如果您的 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();
使用这一行，它将找到紧接在 header 之后的 UL 元素:
$(this).next('ul').tablerize();
它应该按您的预期工作。
另外:
- 要更新您的问题，您只需点击“编辑”并添加您想要的内容即可。
- 要接受答案，请点击此文本左侧的复选标记。
关于jquery - 使用 jQuery 将无序列表转换为表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/582082/