una texto pagina insertar externo div cómo con codigo change cargar agregar javascript jquery list listview html-table

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



jquery table change cell value (4)

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


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


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


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>


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,

  • ...