Javascript 如何使HTML表在单击时展开？

我在JavaScript的帮助下呈现HTML表。我已经成功地创建了表，但现在我有一个要求，即在一行中显示一些新数据，如单击展开行

表格功能：

• 我正在填充我的表格，每个品牌都有一些项目，我想在点击品牌时显示这些项目
• 我几乎创建了表，但无法创建可展开的行
• 我的专栏之一也填充了错误的数据

在我的代码中，我已经注释了我在哪一行执行的所有行

我面临的问题

• 我已经将计算netamount以在

  tbody

  内部填充的行注释为

  GRN Entry

  品牌，但这就是问题的根源

我已经创建了两个代码片段，一个是我想要的完整静态HTML，另一个是展示我所做的工作

我在谷歌上找到的帮助

品牌名称
全部的
杰伊讷格尔
马勒什瓦拉姆
科拉尔
Grn肠
销售额
Grn肠
销售额
Grn肠
销售额
Grn肠
销售额
全部的
1,97,445
6,83,880
1,97,445
4,76,426
0
1,15,313
0
92,141
&NBSP面包房FG
1,610
0.82%
1,610 
0.82%
0
0.00%
0
0.00%
哈拉邦迪
980
0.50%
980
0.50%
0
0.00%
0
0.00%
萨莫萨-L
130
0.7%
130
0.7%
0
0.00%
0
0.00%
玉米片
500
0.25%
500
0.25%
0
0.00%
0
0.00%
&NBS餐厅和蛋糕FG
49,230
25.00%
49,230
25.00%
0
0.00%
0
0.00%
李子饼250克
110
0.05%
110
0.05%
0
0.00%
0
0.00%
奶油糖果蛋糕
720
0.36%
720
0.36%
0
0.00%
0
0.00%
巧克力片蛋糕
40000
20.25%
40000
20.25%
0
0.00%
0
0.00%
芒果蛋糕
14000
7.09%
14000
7.09%
0
0.00%
0
0.00%
杏仁蜂蜜巧克力蛋糕
500
0.25%
500
0.25%
0
0.00%
0
0.00%
黄桃蛋糕
5500
2.78%
5500
2.78%
0
0.00%
0
0.00%
黑森林蛋糕
1000
0.50%
1000
0.50%
0
0.00%
0
0.00%
&NB香料奶油FG
108441
54.92%
108441
54.92%
0
0.00%
0
0.00%
巧克力狂潮
2360
1.19%
2360
1.19%
0
0.00%
0
0.00%
凯萨尔·巴达姆·法卢达
4430
2.24%
4430
2.24%
0
0.00%
0
0.00%
草莓冰淇淋
1231
0.62%
1231
0.62%
0
0.00%
0
0.00%
顶级巧克力
2200
1.11%
2200
1.11%
0
0.00%
0
0.00%
奶酪蛋糕冰淇淋
500
0.25%
500
0.25%
0
0.00%
0
0.00%
圣代大号
2350
1.20%
2350
1.20%
0
0.00%
0
0.00%
芒果冰淇淋
8000
40.5%
8000
40.5%
0
0.00%
0
0.00%
冰蓝色圣代
2340
1.19%
2340
1.19%
0
0.00%
0
0.00%
奶油荔枝
2200
1.11%
2200
1.11%
0
0.00%
0
0.00%
饼干冰淇淋
7000
3.54%
7000
3.54%
0
0.00%
0
0.00%
顶部晶圆
88000
44.56%
88000
44.56%
0
0.00%
0
0.00%
荔枝樱桃圣代
2440
1.23%
2440
1.23%
0
0.00%
0
0.00%
桃马拉巴
2230
1.12%
2230
1.12%
0
0.00%
0
0.00%
樱桃狂热冰淇淋
2700
1.36%
2700
1.36%
0
0.00%
0
0.00%
&北印度FG
324
0.17%
324
0.17%
0
0.00%
0
0.00%
水果混合物
324
0.17%
324
0.17%
0
0.00%
0
0.00%

我建议您使用数据表

DataTables提供了一个丰富的API，用于呈现行数据、显示/隐藏列、搜索/筛选、分页等。它可以通过jQueryUI或Bootstrap或您自己的品牌来设置样式。与编写自己的表显示逻辑不同，DataTables库可以自由使用，而且非常灵活

见：

将“单击的行”或“我们要在其后面添加一些行的行”传递到展开函数中

td.addEventListener('click', function(){
    expand(row);
});

然后使用以下命令展开新行：

function insertAfter(elm, newElm) {
    elm.parentNode.insertBefore(newElm, elm.nextSibling);
}

下面是示例代码：

函数格式（数字，小数=2，区域设置='en-in'）{
const fixed=parseInt（数字）.toFixed（小数）；
常量[int，dec]=固定的.split（'.'））
常量intFormatted=（+int）.toLocaleString（区域设置）
返回INTFORMATED+（十二月？“.+十二月：”；
}
风险值数据=[{
“出口”：“JAYANAGAR”，
“品牌名称”：“面包房FG”，
“项目名称”：“Khara Boondhi-L”，
“交易类型”：“转入”，
“netamount”：980
},
{
“出口”：“JAYANAGAR”，
“品牌名称”：“面包房FG”，
“项目名称”：“Samosa-L”，
“transactionType”：“Trans
<div style="margin:20px">
<table id="example" class="display" style="width:80%">
        <thead>
            <tr>
                <th></th>
                <th>Outlet</th>
                <th>Brand Name</th>
                <th>Item Name</th>
                <th>Transaction Type</th>
                <th>Net Amount</th>
            </tr>
        </thead>

    </table></div>

td.details-control {
  width:32px;
  height:32px;
    background: url('https://image.flaticon.com/icons/png/24/149/149145.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
  width:32px;
  height:32px;
    background: url('https://image.flaticon.com/icons/png/24/149/149147.png') no-repeat center center;
}

    function format ( d ) {
    // `d` is the original data object for the row
  //create the tamplate as per your wish
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Outlet:</td>'+
            '<td>'+d.outlet +'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Brand Name:</td>'+
            '<td>'+d.brandname +'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Transaction Type:</td>'+
            '<td>And any further details here...</td>'+
        '</tr>'+
    '</table>';
}
var groupColumn = 2; //Group by column index
$(document).ready(function() {
    var table = $('#example').DataTable( {

      "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5"><h3>'+group+'</h3></td></tr>'
                    );

                    last = group;
                }
            } );
        },

        "data": [{
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Khara Boondhi-L",
    "transactionType": "TransferIn",
    "netamount": 980
  },
  ....... 1000 OTHER ITEMS 
  {
    "outlet": "MALLESHWARAM",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 92141
  }
],
        "columns": [
            {
                "className":      'details-control',
                "data":           null,
                "defaultContent": ''
            },
            { "data": "outlet" }, //simply remove this columns if you don't require them in outer row
            //{ "data": "brandname" },
            { "data": "itemname" },
            { "data": "transactionType" },
            { "data": "netamount" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );