表排序无法显示多个tr

时间：2018-06-14 08:38:44

标签： jquery html css

我试图在jquery中构建自己的表格排序。

问题的工作示例

＆＃13;
＆＃13; 
$(`.CaseTable_8bd6dc76`).on("click", `i.fa-caret-down`, function(e) {
  if (!$(this).next(`.filter_options_8bd6dc76`).is(":visible")) {
    var $this = $(this);
    var i = ($this.closest("th").index() + 1);
    if ($(this).next(`.filter_options_8bd6dc76`).find(".col-md-10,.col-md-2").length == 0) {

      $(`.filter_options_8bd6dc76`).hide();

      $this.next(`.filter_options_8bd6dc76`).find(".col-md-10,.col-md-2").remove();

      var Alltext = $(`.CaseTable_8bd6dc76 tbody td:nth-child(` + i + `)`).map(function() {
        return $(this).text();
      }).get();

      Alltext = unique(Alltext);

      $.each(Alltext, function(ii, x) {
        $this.next(`.filter_options_8bd6dc76`).find(".row").append(`<div class="col-md-10 filter_8bd6dc76"><label title="` + x + `" for="co_` + i + `_` + ii + `">` + x + `</label></div><div class="col-md-2"><input type="checkbox" id="co_` + i + `_` + ii + `" /></div>`);
      })

      $this.next(`.filter_options_8bd6dc76`).show();
    } else {
      $(`.filter_options_8bd6dc76`).hide();

      $this.next(`.filter_options_8bd6dc76`).show();
    }
  } else {
    $(`.filter_options_8bd6dc76`).hide();
  }
})

function unique(list) {
  var result = [];
  $.each(list, function(i, e) {
    if ($.inArray(e, result) == -1) result.push(e);
  });
  return result;
}

$(document).on("click", function(e) {
  if ($(e.target).closest(`th,.filter_options_8bd6dc76`).length == 0) {
    $(`.filter_options_8bd6dc76`).hide();
  }
})

$(`.CaseTable_8bd6dc76`).on("change", `.filter_options_8bd6dc76 input`, function(e) {
  if ($(`.filter_options_8bd6dc76 input:checked`).length == 0) {
    $(`.CaseTable_8bd6dc76 tbody tr`).show();
  } else {
    $(`.CaseTable_8bd6dc76 tbody tr`).show();
    $(`.filter_options_8bd6dc76 input:checked`).each(function(i, x) {
      var title = $(x).parent().prev().find('label').attr("title");
      var indx = $(x).attr("id").split('_')[1];

      $(`.CaseTable_8bd6dc76 tbody td:nth-child(` + indx + `)`).each(function(ii, xx) {
        if ($(this).text() != title) {
          $(this).parent().hide();
        } else {

        }
      })
    })
  }
});
＆＃13; 
body {
  background-color: #e5e5e5
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 {
  margin-bottom: 10px
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 .catchWord_8bd6dc76,
.Cases_8bd6dc76 .Controllers_8bd6dc76 .search_8bd6dc76 {
  background-color: #ebebeb;
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  border-radius: 10px
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 .dropdown_8bd6dc76 {
  background-color: #ebebeb;
  min-width: 200px;
  display: inline-block;
  border-radius: 10px
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 .dropdown_8bd6dc76 .selected_8bd6dc76 {
  padding: 10px;
  cursor: pointer
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 .dropdown_8bd6dc76 .selected_8bd6dc76 i {
  border-left: 1px solid #000;
  float: right;
  line-height: 22px;
  font-size: 20px;
  padding-left: 10px
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 .dropdown_8bd6dc76 .options_8bd6dc76 {
  display: none
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 ::-webkit-input-placeholder {
  font-style: italic
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 :-moz-placeholder,
.Cases_8bd6dc76 .Controllers_8bd6dc76 ::-moz-placeholder {
  font-style: italic
}

.Cases_8bd6dc76 .Controllers_8bd6dc76 :-ms-input-placeholder {
  font-style: italic
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 {
  width: 100%
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr {
  background-color: #64abb9
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th {
  position: relative
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th span {
  color: #fff
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th i {
  padding-left: 20px;
  line-height: 20px;
  font-size: 20px;
  cursor: pointer
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th i.cog_8bd6dc76 {
  color: #fff
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 {
  position: absolute;
  display: none;
  border: 1px solid #c4c4c4;
  background-color: #fff;
  box-shadow: -1px 10px 44px -20px #333;
  left: 0;
  top: 100%;
  min-width: 200px;
  min-height: 100px;
  max-width: 250px;
  padding: 15px
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .AtoZ_8bd6dc76,
.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .ZtoA_8bd6dc76 {
  cursor: pointer;
  font-weight: 400;
  font-size: 14px
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .AtoZ_8bd6dc76:hover,
.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .ZtoA_8bd6dc76:hover {
  background-color: #ebebeb
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .ZtoA_8bd6dc76 {
  border-bottom: 1px solid #c4c4c4
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .filter_8bd6dc76 {
  cursor: pointer;
  font-weight: 400;
  font-size: 14px
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .filter_8bd6dc76 label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  margin-bottom: 0;
  cursor: pointer
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th .filter_options_8bd6dc76 .filter_8bd6dc76 input[type=checkbox] {
  display: block
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th.option_container_8bd6dc76 {
  position: relative
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th.option_container_8bd6dc76 .cog_options_8bd6dc76 {
  position: absolute;
  display: none;
  border: 1px solid #c4c4c4;
  background-color: #fff;
  box-shadow: -1px 10px 44px -20px #333;
  left: -130px;
  top: 100%;
  min-width: 200px
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th.option_container_8bd6dc76 .cog_options_8bd6dc76>div {
  padding: 15px
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table thead tr th.option_container_8bd6dc76 .cog_options_8bd6dc76 .SettingTableOptions_8bd6dc76 {
  border: none;
  background-color: #64abb9;
  width: 100%;
  cursor: pointer;
  color: #fff;
  padding: 10px 0
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 table tbody tr td {
  cursor: pointer
}

.Cases_8bd6dc76 .CaseTable_8bd6dc76 .download_xlsx_8bd6dc76 {
  background-color: #fff;
  padding: 5px 10px;
  border: 1px solid #000;
  float: right;
  font-size: 13px;
  cursor: pointer
}

.CaseDetails_8bd6dc76 {
  display: none
}

.CaseDetails_8bd6dc76 .return_8bd6dc76 {
  margin-bottom: 10px
}

.CaseDetails_8bd6dc76 .return_8bd6dc76 span {
  color: #000;
  cursor: default
}

.CaseDetails_8bd6dc76 .return_8bd6dc76 span:first-of-type {
  color: #00f;
  cursor: pointer
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 {
  display: block
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .tabs_8bd6dc76 {
  z-index: 2;
  position: relative;
  list-style: none;
  display: table-cell;
  padding-left: 0
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .tabs_8bd6dc76 li {
  display: inline
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .tabs_8bd6dc76 li a {
  border: 1px solid #187b91;
  color: #000;
  float: left;
  display: block;
  padding: 4px 10px;
  margin-left: -1px;
  position: relative;
  left: 1px;
  background: #fff;
  text-decoration: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .tabs_8bd6dc76 li a.active_8bd6dc76 {
  border-bottom: 1px solid #fff
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 {
  position: relative;
  min-height: 250px
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div {
  z-index: 1;
  border: 1px solid #187b91;
  background: #fff;
  padding: 20px;
  min-height: 250px;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  display: none
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div.active_8bd6dc76 {
  display: block
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div .left_container_8bd6dc76 {
  padding-right: 6px
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div .left_container_8bd6dc76 div {
  background-color: #187b91;
  color: #fff;
  padding: 0 10px;
  height: 40px;
  border-bottom: 1px solid #fff;
  line-height: 40px
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div .right_container_8bd6dc76 {
  padding-left: 6px
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76>div .right_container_8bd6dc76 div {
  background-color: #c6e1e5;
  color: #fff;
  padding: 0 10px;
  height: 40px;
  border-bottom: 1px solid #fff;
  line-height: 40px
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 table thead tr {
  background-color: #187b91;
  color: #fff
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 table thead tr th {
  border-left: 1px solid #fff
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 .status_8bd6dc76.Registered_8bd6dc76 {
  background-color: #a9d18e
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 .status_8bd6dc76.Filled_8bd6dc76 {
  background-color: #ffd966
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 .status_8bd6dc76.Pending_8bd6dc76 {
  background-color: #afabab
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 .status_8bd6dc76:hover {
  background-color: #187b91;
  color: #fff
}

.CaseDetails_8bd6dc76 .CaseDetailContainer_8bd6dc76 .box_wrap_8bd6dc76 .Casefamily_8bd6dc76 .status_8bd6dc76 td {
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cases_8bd6dc76">
  <div class="row">
    <div class="col-md-12">
      <div class="CaseTable_8bd6dc76">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                <span>Case title</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                    <div class="col-md-10 filter_8bd6dc76"><label title="Feed for salmonids" for="co_1_0">Feed for salmonids</label></div>
                    <div class="col-md-2"><input type="checkbox" id="co_1_0"></div>
                    <div class="col-md-10 filter_8bd6dc76"><label title="Fish feed pellets and mothod for mkins said pellets" for="co_1_1">Fish feed pellets and mothod for mkins said pellets</label></div>
                    <div class="col-md-2"><input type="checkbox" id="co_1_1"></div>
                    <div class="col-md-10 filter_8bd6dc76"><label title="Case Test" for="co_1_2">Case Test</label></div>
                    <div class="col-md-2"><input type="checkbox" id="co_1_2"></div>
                  </div>
                </div>
              </th>
              <th>
                <span>Reference</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                  </div>
                </div>
              </th>
              <th>
                <span>Primary Agency Ref.</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                  </div>
                </div>
              </th>
              <th>
                <span>Status</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                    <div class="col-md-10 filter_8bd6dc76"><label title="Lapsed" for="co_4_0">Lapsed</label></div>
                    <div class="col-md-2"><input type="checkbox" id="co_4_0"></div>
                    <div class="col-md-10 filter_8bd6dc76"><label title="Registerede" for="co_4_1">Registerede</label></div>
                    <div class="col-md-2"><input type="checkbox" id="co_4_1"></div>
                  </div>
                </div>
              </th>
              <th>
                <span>IP type</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                  </div>
                </div>
              </th>
              <th>
                <span>Case / Master type</span><i class="fa fa-caret-down"></i>
                <div class="filter_options_8bd6dc76" style="display: none;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="AtoZ_8bd6dc76">A to Z</div>
                    </div>
                    <div class="col-md-12">
                      <div class="ZtoA_8bd6dc76">Z to A</div>
                    </div>
                  </div>
                </div>
              </th>
              <th class="option_container_8bd6dc76">
                <i class="fa fa-cog cog_8bd6dc76"></i>
                <div class="cog_options_8bd6dc76">
                  <div class="row"></div>
                  <button class="SettingTableOptions_8bd6dc76">Save</button>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr style="">
              <td>Feed for salmonids</td>
              <td>P47931PC01</td>
              <td>P47931PC01</td>
              <td>Lapsed</td>
              <td>Patent</td>
              <td>Normal</td>
              <td></td>
            </tr>
            <tr style="">
              <td>Fish feed pellets and mothod for mkins said pellets</td>
              <td>P47922DK01</td>
              <td>P47922DK01</td>
              <td>Registerede</td>
              <td>Patent</td>
              <td>EP Validation</td>
              <td></td>
            </tr>
            <tr style="">
              <td>Case Test</td>
              <td>P54631AU01</td>
              <td>P54631AU01</td>
              <td>Lapsed</td>
              <td>Trade mark</td>
              <td>Normal</td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="download_xlsx_8bd6dc76">download as xlsx</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

要测试senario /问题，请按照以下步骤操作：

  1. 点击down-arrow
    2. 旁边的Case Title
  2. 点击3个标题中的1个（不是atoz或ztoa）。它现在只显示那些匹配的行。
  3. 如果您再单击Case Title内的其他标题，则会删除所有标题。

    4. 如何解决此问题？

    如果您尝试在Lapsed中选择Status，则会显示2，然后在Case Test中选择Case Title，然后显示1， IS正确

0 个答案:

没有答案
相关问题
最新问题