如何使用 JQuery 将 HTML 表格转换为列表？答案

【问题标题】：How to transform HTML table to list with JQuery?如何使用 JQuery 将 HTML 表格转换为列表？
【发布时间】：2010-10-09 07:48:40
【问题描述】：

如何转换表格

<table>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>  
</table>

使用 jQuery 到段落列表

<ul>
    <li>
        <p>Name</p>
        <p>Price</p>
    </li>
    <li>
        <p>Name</p>
        <p>Price</p>
    </li>  
</ul>

<p><a id="products-show-list">Toggle list view</a></p>

<script type="text/javascript">
    $("#products-show-list").click(function(){...});
</script>

【问题讨论】：

没有给你答案，但我很好奇你为什么要这样做？
是的，这似乎是一件奇怪的事情。你能解释一下你的背景吗？ StackOverflow 是否会发布一些随机无意义的问题来提高页面浏览量？
有人想要这样做的原因有很多——例如，在移动视图中，您可能希望表格的内容填充下拉菜单。我知道这应该是一个艰难的人群，但没有人能预见到每一种可能的编码场景，不管你的 SO 声誉有多高。

标签： javascript jquery list listview html-table

【解决方案1】：

你可以试试：

function convertToList() {
  var list = $("<ul></ul>");
  $("table tr").each(function() {
    var children = $(this).children();
    list.append("<li><p>" + children[0].text() + "</p><p>" + children[1] + "</p></li>");
  }
  $("table").replaceWith(list);
}

【讨论】：

【解决方案2】：

function convertToList(element) {
    var list = $("<ul/>");

    $(element).find("tr").each(function() {
        var p = $(this).children().map(function() {
            return "<p>" + $(this).html() + "</p>";
        });

        list.append("<li>" + $.makeArray(p).join("") + "</li>");
    });

    $(element).replaceWith(list);
}

【讨论】：

我比@cletus 的回答更喜欢这个，因为它不假设要进行多少次 ->
转换。

【解决方案3】：

我可以看到这在 SharePoint 中很有用，它喜欢使用一堆嵌套表来呈现一个更有效的简单列表，

...

【讨论】：

【解决方案4】：

这还有一些工作要做，但这是我到目前为止要做的工作：

<script>
$(function(){
 t2l("uglytable");
});

function t2l(divname)
{ 
 var ulist  = $("<ul></ul>");
 var table  = "div." + divname + " table";
 var tr   = "div." + divname + " table tr";

 $(tr).each(function(){
  var child = $(this).children();
  ulist.append("<li>" + child.text() + "</li>");
 });
 $(table).replaceWith(ulist);
}

</script>

<div class="uglytable">
  <table border="1">
   <tr>
    <td>lakers</td>
   </tr>
   <tr>
    <td>dodgers</td>
   </tr>
   <tr>
    <td>angels</td>
   </tr>
   <tr>
    <td>chargers</td>
   </tr>
  </table>
 </div>

【讨论】：