javascript - 如何将表 th 转换为 li 并将 td 转换为用javascript？

Question

你好我有这样的桌子

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

Answer 2

希望以下代码可以帮助您：

(function ($){
    var ul = $("<ul>");
    var li = null
    var p = null;
    var content = null;

    var table = $("table");
    var ths = table.find("tr").eq(0).find("th");
    var tds = table.find("tr").eq(1).find("td");

    ths.each(function (){
        li = $("<li>");
        p = $("<p>");

        content = $(this).html();
        p.html( tds.eq($(this).index()).html());

        li.append(content);
        li.append(p);
        ul.append(li);

    });
    table.replaceWith(ul);
})(jQuery);

这是演示，美好的一天：P

Answer 3

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

<button onclick="convert()">convert</button>


<script language="javascript">
    function convert() {
        var a = document.getElementsByTagName('th');
        var c = document.getElementsByTagName('td');
        var b = '';
        var d = '';
        for (var i=0;i< a.length;i++) {
            b += "<li>" + a[i].innerHTML + "</li>";
        }
        a[0].parentNode.innerHTML=b;
        for (var i=0;i< c.length;i++) {
            d += "<p>" + c[i].innerHTML + "</p>";
        }
        c[0].parentNode.innerHTML=d;
    }

</script>

使用纯 Javascript

jsfiddle

Answer 4

    $(document).ready(function(){
    var headers = new Array();
    var values = new Array();
       $('table th').each(function(){
                headers.push($(this).text());

        });

       $('table td').each(function(){
                values.push($(this).text());

        });

     var returndata = "<ul>";
         for(i=0;i<headers.length;i++){
           returndata+="<li>"+headers[i]+"<p>"+values[i]+"</p></li>";
        }

    returndata+="</ul>"; 


 $("table").html(returndata);   


    });