Question

我正在尝试创建动态表，您可以在此处看到结构（下面的jsfiddle）：

<table id="myTable">
                <thead>
                    <tr>
                        <th colspan="2" style="color:white; background-color:aquamarine">Infos client</th>
                        <th colspan="6" style="color:white; background-color:#00ACC1">Commande client</th>
                        <th colspan="3" style="color:white; background-color:#607D8B">Chiffre d'affaires</th>
                        <th></th>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th style="border-right:2px solid rgba(0,0,0,.12)">Prénom</th>
                        <th>Libellé produit</th>
                        <th>Date livraison</th>
                        <th>Date cmde</th>
                        <th>Fournisseur</th>
                        <th>Date théo. liv</th>
                        <th style="border-right:2px solid rgba(0,0,0,.12)"></th>
                        <th>Prix achat TTC</th>
                        <th>Marge TTC</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Nom</th>
                        <th style="border-right:2px solid rgba(0,0,0,.12)">Prénom</th>
                        <th>Libellé produit</th>
                        <th>Date livraison</th>
                        <th>Date cmde</th>
                        <th>Fournisseur</th>
                        <th>Date théo. liv</th>
                        <th style="border-right:2px solid rgba(0,0,0,.12)"></th>
                        <th>Prix achat TTC</th>
                        <th>Marge TTC</th>
                        <th>Actions</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr id="Newline">
                        <td><input type="text"  /></td>
                        <td style=";border-right:2px solid rgba(0,0,0,.12)"><input type="text"  /></td>
                        <td><input type="text"  /></td>
                        <td><input type="text"  value="" /></td>
                        <td style="border-right:2px solid rgba(0,0,0,.12)"><input type="text"  value=""/></td>
                        <td><input type="text"></td>
                        <td><input  type="text" ></td>
                        <td style="border-right:2px solid rgba(0,0,0,.12)"><a href="#" id="Addproduct">add</a></td>
                        <td><input type="text" /></td>
                        <td><input type="text" /></td>
                        <td><i class="material-icons">save</i></td>
                    </tr>
                </tbody>
            </table>

这里的链接： https://jsfiddle.net/vg2u9hyc/2/

我想在tr部分中添加Commande client，并在rowspan和Infos client部分中添加Chiffre d'affaires。

一个订单可以有多个产品，是否可以为Commande client部分添加产品线（使用添加按钮）并在其他部分添加行跨度？

Answer 1

对于未来的阅读器，我将类名“ IC”添加到所有不相关的td中，并在添加后单击以使用var行模板创建新的tr行

        var rowNum = $('.LibelleProduit').length;
        rowNum ++;
        var rows = '<tr id="LignePrdt'+rowNum+'"><td> ...</td></tr>';
        $(rows).insertAfter('#Newline');    
        $('.IC').attr('rowspan', rowNum);

Answer 2

我认为以下代码可以帮助您解决问题，您可以根据自己的要求自定义此代码：

var addRow = $(".table1 tr td a");
addRow.click(function() {
  var trContent = $(this).closest('tr');
  $(this).text("Remove");
  $(".table2").append(trContent.wrap('<tr></tr>'));
});

td {
  width: 90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
  <tr>
    <th>Content 1</th>
    <th>Content 2</th>
    <th>Add?</th>
  </tr>
  <tr>
    <td><input type='text' /></td>
    <td><input type='password' /></td>
    <td><a class="hide-on-click" href="javascript:void(0)">Add</a></td>
  </tr>
  <tr>
    <td><input type='text' /></td>
    <td><input type='password' /></td>
    <td><a class="hide-on-click" href="javascript:void(0)">Add</a></td>
  </tr>
</table>

<table class="table2">
  <tr>
    <th>Content 1'</th>
    <th>Content 2'</th>
    <th>Remove?</th>
  </tr>
</table>

这基本上是从您的代码情况中得出的代码。

Here是小提琴的链接。我希望这会有所帮助。

如何使用jQuery在表中添加tr和rowspan

2 个答案: