javascript - 如何使用 JQuery 将 HTML 表格转换为列表？

Question

我将如何转换表格

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

到带有 jQ​​uery 的段落列表

<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>

Answer 1

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);
}

Answer 2

你可以试试：

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);
}

Answer 3

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

<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>

Answer 4

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

...