如何使用 JS/jQuery 将一页中的多个表转换为 UL 列表？

Question

I would like to convert multiple tables on one page into UL lists.

For each table I have created a numbered class, so as not to find the contents of one table inside another.

This is because JS duplicates me the contents of the variables.

What I would like to achieve is to convert all the tables in UL list, referring to them with a common class, without having to create a numbering.

So I can create multiple tables, without having the counter limit to have to increment each time, if I want to use multiple tables on the same page.

Thanks in advance!

This is what I tried to do:

 (function() { /*Counter by class numbering so as not to have duplicate table content in others. This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/ var tableInPage = 3; for (let i = 0; i <= tableInPage; i++) { var ul = $('<ul>'); $('.table-list-' + tableInPage[i] + ' ' + 'table tr').each(function() { var li = $('<li>') $('th, td', this).each(function() { var span = $('<span>').html(this.innerHTML); i.append(span); }); ul.append(li); }) $('.table-list-' + tableInPage[i] + ' ' + 'table').replaceWith(ul); } })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Table 1--> <div class='table-list-1'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div> <!-- Table 2--> <div class='table-list-2'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div>

Answer 1

Here you go. JSFiddle Working Link

HTML

 <!-- Table 1-->
 <div class='table-list'>
    <table>
      <tr>
          <td>A</td>
          <td>A</td>
      </tr>
     </table>
 </div>

<!-- Table 2-->
<div class='table-list'>
    <table>
      <tr>
          <td>A</td>
          <td>A</td>
      </tr>
     </table>
 </div>
 <!-- Table 3-->
 <div class='table-list'>
    <table>
      <tr>
          <td>A</td>
          <td>A</td>
      </tr>
     </table>
 </div>
 
 and so on .....

JS/JQ

(function () {

/*you don't have to give numbering class to each table. Just give all of them same class and the code will do the rest*/

   $(".table-list").each(function(){
   
    var ul = $('<ul>');
                  
        $('table tr', this).each(function () {
        
            $('th, td', this).each(function () {
              var li = $('<li>')
              var span = $('<span>').html(this.innerHTML);
              li.append(span);
              ul.append(li);
           });
 
         });
         
         $('table', this).replaceWith(ul);
   })

  })();

Answer 2

I've rewritten your code a bit, so now you should not have to change any jQuery if you add another table.

(function() {

  $('div[class^="table-list"]').each(function() {

    var ul = $('<ul>');

    $('table tr',this).each(function() {
      var li = $('<li>')
      $('th, td', this).each(function() {
        var span = $('<span>').html(this.innerHTML);
        li.append(span);
      });
      ul.append(li);
    })

    $('table tr',this).replaceWith(ul);
  })
})();

Demo

 (function() { $('div[class^="table-list"]').each(function() { var ul = $('<ul>'); $('table tr',this).each(function() { var li = $('<li>') $('th, td', this).each(function() { var span = $('<span>').html(this.innerHTML); li.append(span); }); ul.append(li); }) $('table tr',this).replaceWith(ul); }) })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Table 1--> <div class='table-list-1'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div> <!-- Table 2--> <div class='table-list-2'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div>

Answer 3

You can just walk this inside out for each element and replace simply with the contained HTML.

 (function() { $('div[class^=table-list-]').each(function() { $(this).find('th, td').each(function() { $(this).replaceWith($('<span>').html(this.innerHTML)); }); $(this).find('tr').each(function() { $(this).replaceWith($('<li>').html(this.innerHTML)) }); $(this).find('tbody').each(function() { $(this).replaceWith($('<ul>').html(this.innerHTML)); }); $(this).find('table').each(function() { $(this).replaceWith(this.innerHTML); }); // unclear the requirement to replace the div with the ul but this does that $(this).replaceWith(this.innerHTML); }); })();

 ul { border: solid red 1px; } li { border: solid lime 1px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Table 1--> <div class='table-list-1'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div> <!-- Table 2--> <div class='table-list-2'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div>

Answer 4

You are almost there. Your code just needs a little touch up and it would work. Please change:

//i.append(span) to:
li.append(span)

//and tableInPage[i] to:
(i+1)

DEMO

 (function() { /*Counter by class numbering so as not to have duplicate table content in others. This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/ var tableInPage = 3; for (let i = 0; i <= tableInPage; i++) { var ul = $('<ul>'); $('.table-list-' + (i+1) + ' ' + 'table tr').each(function() { var li = $('<li>') $('th, td', this).each(function() { var span = $('<span>').html(this.innerHTML); li.append(span); }); ul.append(li); }) $('.table-list-' + (i+1) + ' ' + 'table').replaceWith(ul); } })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Table 1--> <div class='table-list-1'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div> <!-- Table 2--> <div class='table-list-2'> <table> <tr> <td>A</td> <td>A</td> </tr> </table> </div>