使用jquery将多行组合成一个html表行答案

【问题标题】：combining mutiple rows into an hml table row using jquery使用jquery将多行组合成一个html表行
【发布时间】：2025-12-22 04:45:06
【问题描述】：

我有一个像这样的行和列的表

row1            1      2      3
row2                   4
row3               5        6

并且这个序列被重复 n 次，这是一个单品的购物车表。我需要在下一页上显示同一个表格作为购物车内容的摘要，在这样的表格中的一行中显示产品的所有字段：

   row1         2   3   4   5   6

所以所有字段都需要在一行上，并且购物车中的第二个项目在第二行等等..，第一列（td）是一个 img 将被删除，第 4、5 和第 6 个是输入文本字段，需要转换为文本标签并与项目的其他字段在同一行。我知道我可以通过以下方式获取表格内容：$( "#id_of_table_clone" ).html( $( "#table_cart" ).html() ); 如何自定义行结构以添加包含下面行内容的列？

添加包含 2 个项目的购物车内容的图像，我希望将“业务理由”、“开始日期”和“结束日期”作为列标题，并将它们的内容作为行内容值全部放在一行中，并带有角色和描述。

这是购物车表格的 html

        <table id="table_rolecart"class="table sortable" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th class="sorting" style="width: 5%" scope="col">
            off
          </th>
          <th scope="col" style="width: 40%">
            <span class="column-sort" >
              <a href="#" title="Sort up" class="sort-up"></a>
              <a href="#" title="Sort down" class="sort-down"></a>
            </span>
          Role
          </th>
          <th scope="col" style="width: 55%">
            <span class="column-sort" >
              <a href="#" title="Sort up" class="sort-up"></a>
              <a href="#" title="Sort down" class="sort-down"></a>
            </span>
     Description
          </th>
        </tr>
      </thead>
      <tbody>

      </tbody>

        </table>

然后我将 tbody 项插入到该表中，就像从另一个表外部插入一样

$("#table_newrole img.move-row").live("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "/gra/images/icons/fugue/cross-circle.png")
            .attr("alt", "Remove");
        $("#table_rolecart tbody").append(tr);
        $("#table_rolecart tbody").append('<tr style="color:black"><td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="" id="ar_businessjust"></td></tr><tr style="color:black"><td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="" id="ar_startdate"> </td><td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="" id="ar_enddate"></td></tr><tr style="height:8px"></tr>');

    });

【问题讨论】：

如何渲染一项？请同时显示 html。

标签： jquery jquery-selectors

【解决方案1】：

试试下面的，它会根据你的需要创建表格：

在这里试试：http://jsfiddle.net/amantur/HuQd8/

<html>
<head>
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
</head>
<body>
<table id="table_rolecart" class="table sortable" cellspacing="0" width="70%" border="1">
  <thead>
    <tr>
      <th class="sorting" style="width: 5%" scope="col">off</th>
      <th scope="col" style="width: 40%">
      <span class="column-sort">
        <a href="#" title="Sort up" class="sort-up"></a>
        <a href="#" title="Sort down" class="sort-down"></a>
      </span>Role</th>
      <th scope="col" style="width: 55%">
      <span class="column-sort">
        <a href="#" title="Sort up" class="sort-up"></a>
        <a href="#" title="Sort down" class="sort-down"></a>
      </span>Description</th>
    </tr>
  </thead>
  <tbody>
  <tr style="color:black">
    <td>X</td><td>Role 1</td><td>Description 1</td>
  </tr>
  <tr style="color:black">
    <td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="business 1" id="ar_businessjust"></td>
  </tr>
  <tr style="color:black">
    <td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="sd1" id="ar_startdate"> </td>
    <td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="ed1" id="ar_enddate"></td>
  </tr>
  <tr style="color:black">
    <td>X</td><td>Role 2</td><td>Description 2</td>
  </tr>
  <tr style="color:black">
    <td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="business 2" id="ar_businessjust"></td>
  </tr>
  <tr style="color:black">
    <td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="sd2" id="ar_startdate"> </td>
    <td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="ed2" id="ar_enddate"></td>
  </tr>
 </tbody>
</table>
<table id="newTable" style="display:none">
    <thead><th>item name</th><th>desc</th><th>business justification</th><th>start date</th><th>end date</th></thead>
    <tbody></tbody>
</table>
<p>
    <span id="createTable">create new table</span>
</p>
Supposing all the items are enclosed inside 'tbody' tags we can proceede as follows:
<script type="text/javascript">
$(function(){
    $("#createTable").click(function(){
        var ntr='',//to store html for new table row
         rows=[],//to collect new rows
        $tbl=$("#table_rolecart tbody"),//original table
        l=$("tr", $tbl).length;//length of rows in original table's tbody section
        var row, brow, drow;
        for(var i=0;i<l;){
            row=$("tr:eq("+i+")", $tbl);//row with item name 
            brow=row.next("tr");//row with business justification textbox
            drow=brow.next("tr");//row with date textboxes

            ntr='<tr><td>'+$("td:nth-child(2)",row).text()+'</td><td>'  //add item name
                +$("td:nth-child(3)",row).text()+'</td><td>'//add description
                +$(brow).find("input#ar_businessjust").val()+'</td><td>' //add business just.
                +$(drow).find("input#ar_startdate").val()+'</td><td>'//start date
                +$(drow).find("input#ar_enddate").val()+'</td></tr>';//end date
                rows.push(ntr);
            i+=3;//we have traversed 3 rows so next one should be current + 3
        }
        $("#newTable tbody").append(rows.join(''));
        $("#newTable").show();
    });
});
</script>
</body>
</html>

【讨论】：

而不是在同一页面上显示新表格，我想知道如何转发内容并在 nextpage.gsp 上显示表格，我可以创建一个模板 gsp 并将此表格复制到其中并在我的下一个操作调用中包含该模板？
您可以创建一个JSON 对象而不是创建一个表并将其传递到下一页。

【解决方案2】：

为您希望复制内容的每个 td 提供 ID。它更容易指出，因为表格有点难以处理/处理复杂

【讨论】：