2

$.map 関数を使用して、テーブルをオブジェクトに正常に変換しました。<tr> to <dl> <th> to <dt> <td> to <dd>ただし、変換してページに結果を追加し、最終的に元のテーブルをビューから非表示にしたいと考えています。

注: 実際の行数はテーブルごとに異なります。サイトのすべてのテーブルに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));
4

3 に答える 3

3

<dl>コードを少し変更するだけで、テーブルからリストを生成するのは簡単です。

jsFiddle: http://jsfiddle.net/nfnrJ/5/

// Create a list of headers
var headers = [];

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

// Iterate through each table row
var tbl = $('table tbody tr').each(function(cIndex, cRow) {
    // Create a new <dl> object for each row
    var cDL = $('<dl></dl>');

    // Iterate through each cell in the row
    $(cRow).find('td').each(function(cCellIndex, cCell) {
        // For each cell append the corresponding header as a <dt>
        // and then append a <dd> element with the cell text
        cDL.append('<dt>' + headers[cCellIndex] + ':</dt>')
           .append('<dd>' + $(cCell).text() + '</dd>');
    });

    // Append the new <dl> list to the #item <div>
    $('#item').append(cDL);
});
于 2013-05-22T17:02:43.337 に答える