Question

我有一个<dl>我想在jQuery的帮助下转换成表格式。

HTML：当前

  <div id="item">
  <dl>
    <dd>A</dd>
    <dt>B</dt>
    <dd>C</dd>
    <dt>D</dt>
    <dd>E</dd>
    <dt>F</dt>
  </dl>
 </div>

HTML Desired

   <table>
    <tr>
    <td>A</td>
    <td>B</td>
    </tr>
     <tr>
    <td>C</td>
    <td>D</td>
     </tr>
    <tr>
    <td>E</td>
    <td>F</td>
    </tr>
    </table>

Answer 1

HTML：

<div id="here_table"></div>

jQuery的：

var arr = $("#item dl").children().map(function () {
        return $(this).text();
   }).get();

   for (var i = 0; i < arr.length; i += 2) {

       $('#here_table').append('<tr><td>' + arr[i] + '</td><td>' + arr[i + 1] + '</td></tr>');
   }

Answer 2

＆＃13;

$(document).ready(function() {
  var table = $('<table/>'),
      tbody = $('<tbody/>'),
      tr = $('<tr/>'),
      tds = $('#item').find('dd,dt').clone(),
      thisTR = tr.clone();
  $.each( tds, function(i) {
    thisTR.append( $('<td/>').text( $(this).text() ) );
    if( i % 2 === 1 ) {
      table.append( thisTR );
      thisTR = tr.clone();
    }
  });
  $('#item').html( table );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item">
  <dl>
    <dd>A</dd>
    <dt>B</dt>
    <dd>C</dd>
    <dt>D</dt>
    <dd>E</dd>
    <dt>F</dt>
  </dl>
 </div>

＆＃13;

使用JQuery </dl>将每个定义列表（<dl>）重建为一个表

2 个答案: