Question

我遇到了表扩展的问题。我正在将数据填充到表中，并且表的最后一列中包含更多内容，因此使用jquery可以获取表行的最后一列中的所有文本，将详细信息附加到下一行？为什么我尝试这个奇怪的事情是使用jQuery表扩展插件...任何提示..请发布...

jQuery操作之前的示例表数据

<table width="700" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>001</td>
        <td>Name</td>
        <td>1210 W. Valley Dr, Los Angeles, 91742</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Name</td>
        <td>PO BOX 1719, Chicago, 60608</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Name</td>
        <td>RR 3 BOX 78, Kaufman, 75142</td>
      </tr>
    </table>

jQuery操作后的结果表数据

<table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>001</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">1210 W. Valley Dr, Los Angeles, 91742</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">PO BOX 1719, Chicago, 60608</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">RR 3 BOX 78, Kaufman, 75142</td>
  </tr>
</table>

Answer 1

我认为这可以解决您的问题。

$(function(){    
    $("#tbl1 tr" ).each ( function() {
        var text = $(this).find ( "td:last-child").text();
        $(this).find ( "td:last-child").text('view');
        $(this).after ( "<tr><td colspan='3'>" + text + "</td></tr>" );
    });
});

Answer 2

jQuery有5000万种方法可以完成一项任务，但这可以做你想做的事情：

$(function(){
    $('table tr td:nth-child(3)').each(function(){                
        var $this = $(this);
        $this.clone().attr('colspan', 3)
             .wrap('<tr></tr>').parent().insertAfter($this.parent());
        $this.text('View');
    })
})

这会克隆原始td，将其包装在tr中并将其插入原始td的父级之后。最后，它将文本重置为View

在表中的每一行之后追加附加行

2 个答案: