如何将表格转换成li和td到javascript中使用<p>？
你好，我有这样的桌子
<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);
}
但我真的不知道如何循环播放这张表。 抱歉
假设<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);
$(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);
});
<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
链接地址: http://www.djcxy.com/p/17241.html上一篇: How to convert table th into li and td into <p> with javascript?