时间戳

首页 > 解决方案 > 如何用jquery扩展表行？

javascript - 如何用jquery扩展表行？

问题描述

目前，我有一个显示为图像显示的表格，其中包含隐藏的偶数行。我正在寻找的是所有行都被隐藏并且月份的名称出现。

在图像的示例中，它只需要显示 11 月，并且在显示时会显示该月的信息。我正在使用来自 jquery 的 jexpand 插件

我留下代码，这样你就可以看到我目前是如何拥有它的。有任何想法吗？

脚本

$(document).ready(function(){
                $("#report tr:odd").addClass("odd");
                $("#report tr:not(.odd)").hide();
                $("#report tr:first-child").show();
                $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        });

CSS

body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}

HTML

 <table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
            
                <thead class= "text-center table-info">
                    <tr>
                        <th>Date</th>
                        <th>Calls</th>
                        <th>Sales</th>
                    </tr>
                </thead>
                <tbody>
                    <?php for($i = 0; $i < count($calls); ++$i) { ?>
                        <tr class="text-center">
                            <td id="id"><?= $calls[$i]['date'] ;?></td>
                            <td id="database"><?= $calls[$i]['calls'] ;?></td>
                            <td id="total"><?= $calls[$i]['sales'] ;?></td>
                            <td><div class="arrow"></div></td>
                        </tr>
                    <?php } ?>
                <?php endif; ?>
                </tbody>
            </table>

桌子

标签： javascriptphphtmljquery

解决方案

由于您的日期以dd-mm-yyyy如此简单的方式显示来获取月份就是使用split方法，因此一旦我们得到月份，我们需要循环trs隐藏所有月份，除了第一个月份，还odd为其添加类。

然后，单击tr仅获取月份td，然后循环遍历具有相同月份的 trs 将up类添加到该 td 并显示相同的 tr。

演示代码：

//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
  //get month 
  var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
  //loop thorough tr to find same month tr
  $("tbody >  tr").not(this).each(function() {
    var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
    if (mnth == mnth_other) {
      $(this).toggle();
      $(this).find(".arrow").toggleClass("up");
    }

  });
});
var date_current;
//loop through tr
$("tbody >  tr").each(function() {
  //get month
  var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
  //check if not equal
  if (date_current != dates) {
    $(this).addClass("odd");
    $(this).find(".arrow").addClass("down");
    date_current = dates;
  } else {
    //hide other tr
    $(this).hide()
  }

})
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">

  <thead class="text-center table-info">
    <tr>
      <th>Date</th>
      <th>Calls</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>

    <tr class="text-center">
      <td id="id">
        27-11-2020
      </td>
      <td id="database">
        22
      </td>
      <td id="total">
        1
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="text-center">
      <td id="id">
        27-11-2020
      </td>
      <td id="database">
        22
      </td>
      <td id="total">
        1
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="text-center">
      <td id="id">
        21-11-2020
      </td>
      <td id="database">
        22
      </td>
      <td id="total">
        12
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="text-center">
      <td id="id">
        20-12-2020
      </td>
      <td id="database">
        222
      </td>
      <td id="total">
        21
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="text-center">
      <td id="id">
        27-12-2020
      </td>
      <td id="database">
        22
      </td>
      <td id="total">
        1
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="text-center">
      <td id="id">
        27-12-2020
      </td>
      <td id="database">
        22
      </td>
      <td id="total">
        1
      </td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>

  </tbody>
</table>

推荐阅读