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

我想将一页上的多个表转换为UL列表

对于每个表，我都创建了一个编号的类，这样就不会在另一个表中找到一个表的内容

这是因为JS复制了变量的内容

我想要实现的是转换UL列表中的所有表，用一个公共类引用它们，而无需创建编号

因此，如果我想在同一页上使用多个表，我可以创建多个表，而无需每次递增计数器限制

提前谢谢

这就是我试图做的：

（函数（）{
/*按类别编号计数，以免在其他类别中有重复的表格内容。
这是限制因素：我可以创建3个表，如果我想要更多，我必须每次都增加它*/
var tableInPage=3；
for（设i=0；i
A.
A.

我已经重写了您的代码，因此如果您添加了另一个表，现在不必更改任何

jQuery

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

（函数（）{
$（'div[class^=“table list”]”）。每个（函数（）{
var ul=$（“
”）；
$（'table tr'，this）.each（function（）{
变量li=$（“
”）
$（'th，td'，this）.each（function（）{
var span=$（''）.html（this.innerHTML）；
li.追加（span）；
});
ul.附加（li）；
})
$（'table tr'，this）.替换为（ul）；
})
})();

演示

（函数（）{
$（'div[class^=“table list”]”）。每个（函数（）{
var ul=$（“
”）；
$（'table tr'，this）.each（function（）{
变量li=$（“
”）
$（'th，td'，this）.each（function（）{
var span=$（''）.html（this.innerHTML）；
li.追加（span）；
});
ul.附加（li）；
})
$（'table tr'，this）.替换为（ul）；
})
})（）；

A.
A.
A.
A.

给你

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

A.
A.
A.
A.
A.
A.
等等

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

  })();

（函数（）{
/*您不必为每个表指定编号类。只需为所有表指定相同的类，代码即可完成其余部分*/
$（“.table list”）。每个（函数（）{
var ul=$（“
”）；
$（'table tr'，this）.each（函数（）{
$（'th，td'，this）.每个（函数（）{
变量li=$（“
”）
var span=$（''）.html（this.innerHTML）；
li.追加（span）；
ul.附加（li）；
});
});
$（'table'，this）.replacement为（ul）；
})
})();

对于每个元素，您只需将其从内到外遍历，然后简单地用包含的HTML替换即可

（函数（）{
$（'div[class^=table list-]'）。每个（函数（）{
$（this）.find（'th，td'）。each（function（）{
$（this.replace为（$（''）.html（this.innerHTML））；
});
$（this）.find（'tr'）.each（function（）{
$（this.replaceWith（$（'
'）.html（this.innerHTML））
});
$（this）.find（'tbody'）.each（function（）{
$（this.replacetwith（$（'
'）.html（this.innerHTML））；
});
$（this）.find（'table'）.each（function（）{
$（this.replaceWith）（this.innerHTML）；
});
//不清楚用ul替换div的要求，但确实如此
$（this.replaceWith）（this.innerHTML）；
});
})（）；

ul{
边框：纯红1px；
}
李{
边框：固体石灰1px；
}

A.
A.
A.
A.

您就快到了。您的代码只需要稍加修改就可以了。请更改：

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

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

演示

（函数（）{
/*按类别编号计数，以免在其他类别中有重复的表格内容。
这是限制因素：我可以创建3个表，如果我想要更多，我必须每次都增加它*/
var tableInPage=3；
for（设i=0；i
A.
A.

“JS复制我的内容”-JS只做你告诉它做的事…你有几个打字错误-

i.append

->

li.append

和

tableInPage[i]

应该是

i

[编辑：修复打字错误中的讽刺性打字错误]你可以做

var tableInPage=$（[div[class^='table-list']））.length；

-但最好完全跳过

表格页面

和

表格列表-n