javascript - 如何使用 javascript 将表 th 转换为 li 并将 td 转换为 <p>？

Question

你好，我有这样的 table

<table>
  <tbody>
    <tr>
      <th>PROVINSI</th>
      <th>KABKOT</th>
      <th>KECAMATAN</th>
      <th>DESA</th>
    </tr>

    <tr>
      <td>KALIMANTAN TENGAH</td>
      <td>SERUYAN</td>
      <td>SERUYAN HILIR</td>
      <td>TANJUNG RANGAS</td>
    </tr>
  </tbody>
</table>

我想把这个表转换成这样的无序列表

<ul>
      <li>PROVINSI<p>KALIMANTAN TENGAH</p></li>
      <li>KABKOT<p>SERUYAN</p></li>
      <li>KECAMATAN<p>SERUYAN HILIR</p></li>
      <li>DESA<p>TANJUNG RANGAS</p></li>

</ul>

我如何使用 javascript 执行此操作？

我试过了

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

但我真的不明白如何遍历这张表。抱歉

Answer 1

假设<table id="target">...</table>

JSFiddle

var ul = $("<ul>");
$("#target th").each(function(i, v){
  var li = $("<li>")
  li.append($(v).text());
  var p = $('<p>').append($($("#target td")[i]).text());
  li.append(p);
  ul.append(li);
})    
$("#target").replaceWith(ul);