相关疑难解决方法(0)

我在JavaScript的帮助下呈现HTML表。我已经成功地制作了表格，但是现在我有一个要求可以连续显示一些新数据，例如单击“展开”行

表功能：

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

在我的代码中，我注释了所有行，我在那一行中正在做什么

我面临的问题

• 我已作了评论，我计算netamount来填充里面的线tbody作为GRN entery品牌的睿智但造成问题的

我创建了两个代码段，一个是完整的静态HTML，就像我想要的那样，另一个是显示我的工作。

我在Google上找到的帮助

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<table class="table table-responsive table-hover table-bordered">
  <thead>
    <tr>
      <th> Brand Name</th>
      <th colspan="2">Total</th>
      <th colspan="2">Jayanagar</th>
      <th colspan="2">Malleshwaram</th>
      <th colspan="2">Kolar</th>
    </tr>
    <tr>
      <th></th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
    </tr>
    <tr>
      <th>Total</th>
      <th>1,97,445</th>
      <th>6,83,880</th>
      <th>1,97,445</th>
      <th>4,76,426</th>
      <th>0</th>
      <th>1,15,313</th>
      <th>0</th>
      <th>92,141</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="clickable" data-toggle="collapse" id="row1" …

我试图解决一个问题,因为我终于明白,如​​果没有帮助,我将不会成功...我想做一个我们每天在互联网上看到的共同点:能够点击表格行以显示更多细节.但是这里更多细节并不意味着文本块,而是与父行具有相同形状的子行.

以下是HTML表的示例:

<table class="collapse table">
<tr>
    <th>Age</th>
    <th>Sex</th>
    <th>Name</th>
    <th>From</th>
</tr>
<tr class="parent">
    <td>100</td>
    <td>M</td>
    <td>Dodo</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="parent">
    <td>100</td>
    <td>M</td>
    <td>Dodo</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>

孩子和父母的数量是灵活的,我想要一个灵活管理这个特征的例子.页面加载时必须关闭子行,并且仅当用户单击父页时才展开.如果有可能我想添加一个图标,指示用户点击一行(基本上是"+"和" - "),但不是一个简单的字符串,一个真正的图标.

我已经看到并遵循了许多例子,但他们中没有人完美地完成这项工作,并试图修改例子......没有成功.其中大多数是基于Datatables的示例,我不想使用它.

你能帮我吗 ？我知道我的问题非常充实,我要求做大部分工作,但没有找到一个完整的例子来做我想要的HTML,CSS,Javascript.

谢谢.

在Andrei Gheorghiu的回答之后编辑:

我希望最终只能点击图标而不是整行,我在同一行上有其他按钮,如果我点击它,它会激活孩子的开放.所以我做了什么,等待更好的解决方案:

HTML:将"tr"更改为特定的"td"类,并在此"td.toto"类中添加图标行. …