jquery - 使用 JQuery 将每个表行重建为定义列表

Question

我使用 $.map 函数成功将表转换为对象。但是，我想转换<tr> to <dl> <th> to <dt> <td> to <dd>然后将结果附加到页面上，最后从 View 中隐藏原始表格。

注意:每个表的实际行数会有所不同。我假设网站上的所有表格都有 thead

HTML:所需结果

<div id="item">
    <dl>
      <dt>First Name:</dt>
      <dd>James</dd>
      <dt>Last Name:</dt>
      <dd>Matman</dd>
      <dt>Job Title:</dt>
      <dd>Chief Sandwich Eater</dd>
    </dl>
    <dl>
      <dt>First Name:</dt>
      <dd>The</dd>
      <dt>Last Name:</dt>
      <dd>Tick</dd>
      <dt>Job Title:</dt>
      <dd>Crimefighter Sorta</dd>
    </dl>
</div>

HTML:当前

<div id="item"></div>
<table>
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
    </tr>
    </tbody>
</table>

JQuery

var rowCount = $("tbody > tr").length;
var items = [];
var headers = [];

$("thead th").each(function() {
     headers.push($(this).text());
});

var tbl = $('table tbody tr').map(function(r) {
 return $(this).find('td').map(function(c) {
     return {
         row:r + 1,
         col:c + 1,
         cell: $(this).text()
     }
 }).get();
}).get();

console.log(tbl);
//$("#item").html(JSON.stringify(items));

Answer 1

试试这个:-

Fiddle

//Get the template from table headers.
var template = $("<dl>");
$("table thead tr th").map(function () {
    return $('<dt/>', {
        text: $(this).text()
    }).get();
}).appendTo(template); 


//Now look through the data
$("table tbody tr").each(function () {

    var newDl = template.clone(); //Clone the template
    $(this).find('td').each(function (idx, ob) {

        newDl.find('dt:nth-of-type(' + (idx + 1) + ')').after($('<dd/>', {
            text: $(this).text()
        })); //Construct the dd and find the position of dt after which this dd need to be insert, using nth-of-type.
    })
    $('#item').append(newDl); //append it to the div.
});