Question

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

row1            1      2      3
row2                   4
row3               5        6

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

   row1         2   3   4   5   6

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

添加2个项目的购物车内容图片，我想要商业理由＆＃39;，＆＃39;开始日期＆＃39;和＆＃39;结束日期＆＃39;作为列标题及其内容作为行内容值，所有行都包含角色和描述。 enter image description here

这是购物车表的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>');

    });

Answer 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>

Answer 2

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

使用jquery将多行组合到html表行中

2 个答案: