javascript - 如何通过其id在同一行显示两个具有其id的tr

Question

我有一张带有 tr 标签的表格。我想在其类旁边并排显示两个 tr 标签。我怎么能用jquery做到这一点。

<table>
   <tr class='1'>
     <td>First</td>
   </tr>
   <tr class='1'>
      <td>second</td>
   </tr>
   <tr class='2'>
       <td>third</td>
   </tr>
   <tr class='3'>
       <td>fourth</td>
   </tr>
   <tr class='3'>
       <td>fifth</td>
   </tr>  
</table>

然后在我想显示的输出中

 First     Second
 Third
 Fourth    Fifth

我想动态设置这些我如何使用 jquery 或 javascript 来做到这一点。我想使用为 tr 标签声明的类。我知道要为此使用<td>标签。任何帮助表示赞赏

Answer 1

这是我想到的第一种方法：

var $tds = $("td");      // get all the tds
[].reverse.call($tds);   // reverse the order so we can easily loop backwards

$tds.each(function() {
    var $parentRow = $(this).parent(),
        // find the first row with the same class that isn't this row
        $firstTrSameClass = $("tr").filter("." +$parentRow.attr("class"))
                                   .not($parentRow).first();
    if ($firstTrSameClass.length > 0) { // if there is such a row
        $firstTrSameClass.append(this); // move the td
        $parentRow.remove();            // delete the original row
    }   
});

演示：http: //jsfiddle.net/pgcdq/

Answer 2

我在这里看不到一个用例，但我想最简单的方法是创建新行并将单元格移动到它们。您将在此处找到有关移动元素的信息： 如何将一个元素移动到另一个元素中？