在tr中创建每秒td的新表

Question

我正在努力让旧网站响应，但我对这些表有些问题。 这是表格的代码（从CMS生成）：

<table border="0">
<tbody>
<tr>
<td><span>mr. Dende</span></td>
<td><span>mr. Harrolds</span></td>
</tr>  
<tr>
<td><span>Ambrosiushof 27&nbsp;</span> </td>
<td><span>Africastreet 136</span></td>
</tr>

<tr>
<td><span>5254 HD&nbsp; Londen&nbsp;&nbsp;</span> </td>
<td><span>5152 MD&nbsp; Rome</span></td>
</tr>

<tr>
<td><span>T: 893-589 31 51 &nbsp;&nbsp;</span> </td>
<td><span>T: 8973-992 98 10</span></td>
</tr>

<tr>
<td><span>M: +31 36 18 42 18</span></td>
<td><span>M: +31 68 18 18 19 </span></td>
</tr>
</tbody>
</table>

我试图完成的是：

但如果我使用：

    td {
    display: block;
}

看起来像：

我认为jquery是我尝试过的解决方案：

$(function () {
    var $mainTable = $("table");
    var splitBy = 3;
    var rows = $mainTable.find("tr").slice(splitBy);
    var $secondTable = $("table").parent().append("<table id='secondTable'><tbody></tbody></table>");
    $secondTable.find("tbody").append(rows);
    $mainTable.find("tr").slice(splitBy).remove();

});

但这并没有成功。

谢谢！

Answer 1

怎么样

$('body').append($("table").clone());
$($("table")[0]).find('td:first-child').remove();
$($("table")[1]).find('td:nth-child(2)').remove();

Answer 2

我不想这样。但我知道遗产很糟糕。这对表现不利。

如果您尝试此操作，请先修改“getRows”方法。

$(document).ready(function() {
  var clearTbody = function() {
    $("tbody").html("");
  }

  var tbodyHtml = "";

  var getRows = function() {
    //get first tr's td count
    //code here
    return 2; //record 0 to 1
  }
  var rows = getRows();

  var getRecord = function(i) {
    var recordTd = new Array();

    $.each($("tr"), function(idx, val) {
      recordTd.push($(val).children().eq(i));
    });

    return recordTd;
  }


  for (var k = 0; rows > k; k++) {
    var recordTdList = getRecord(k);

    tbodyHtml += "<tr>";
    for (var l = 0; recordTdList.length > l; l++) {
      tbodyHtml += "<td>";
      tbodyHtml += $(recordTdList[l]).html();
      tbodyHtml += "</td>";
    }
    tbodyHtml += "</tr>";

  }

  clearTbody();

  $("tbody").html(tbodyHtml);
});

td {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<table border="0">
  <tbody>
    <tr>
      <td><span>mr. Dende</span>

      </td>
      <td><span>mr. Harrolds</span>

      </td>
    </tr>
    <tr>
      <td><span>Ambrosiushof 27&nbsp;</span> 
      </td>
      <td><span>Africastreet 136</span>

      </td>
    </tr>
    <tr>
      <td><span>5254 HD&nbsp; Londen&nbsp;&nbsp;</span> 
      </td>
      <td><span>5152 MD&nbsp; Rome</span>

      </td>
    </tr>
    <tr>
      <td><span>T: 893-589 31 51 &nbsp;&nbsp;</span> 
      </td>
      <td><span>T: 8973-992 98 10</span>

      </td>
    </tr>
    <tr>
      <td><span>M: +31 36 18 42 18</span>

      </td>
      <td><span>M: +31 68 18 18 19 </span>

      </td>
    </tr>
  </tbody>
</table>