javascript - texto - ¿Cómo transformar una tabla HTML en una lista con JQuery?

jquery table change cell value

Question

¿Cómo transformaría una mesa?

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

a una lista de párrafos con 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>

Answer 1

Tu podrías intentar:

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

Answer 3

Esto todavía tiene algo de trabajo, pero esto es lo que tengo que trabajar hasta ahora:

<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

Puedo ver que esto es útil en SharePoint, que le gusta usar un montón de tablas anidadas para generar una lista simple que es más eficiente de usar,

...