如何从数据表过滤器选项中删除<div>中的文本？

问题描述

我有一个带有过滤器标题列的数据表。一列包含2种数据，用于显示和过滤的实际数据，以及隐藏<div>中的另一种数据。仅当我将鼠标悬停在<div>上时，隐藏的<td></td>才应显示。悬停正在工作。但是，不过，我的过滤器选项也显示了来自隐藏的<div>的数据。如何从过滤器选项中删除隐藏的<div>数据？以下是我的代码：

css-悬停

.hoverbg {
  position: relative;
}

.hoverbg div {
  display: none;
}

.hoverbghover {
  position: relative;
}

.hoverbghover div {
  display: block;
  position: absolute;
  width: 15em;
  top: 1.3em;
  left: 70px;
  z-index: 1000;
  background-color: #DDD;
  font-size: 1.3em;
  padding: 5px;
  border-radius: 4px;
}

PHP

<table id="pic_table" class="table" class="display">
  <thead>
    <tr>
      <th class="filterhead"></th>
      <th class="filterhead"></th>
      <th class="filterhead"></th>
      <th class="filterhead"></th>
      <th class="filterhead"></th>
      <th class="filterhead"></th>
    </tr>
    <tr>
      <th>Serial</th>
      <th>Name</th>
      <th>Project Reference</th>
      <th>Basic Profile</th>
      <th>Employment Permits</th>
      <th>Last Updated</th>
    </tr>
  </thead>
  <tbody>
    <?PHP
      while($row = sqlsrv_fetch_array( $sql_stmt,sqlSRV_FETCH_NUMERIC)){
       
       $row_num = $row[0];
       $name = strtoupper($row[1]);
       $pr_stats = intval($row[3]);
       $bp_stats = intval($row[4]);
       $ep_stats = intval($row[5]);         
       $update_date = $row[2]->format("d-M-y");
                             
      echo"<tr>";
      echo "<td>".$row_num."</td>";
      echo "<td>".$name."</td>";
      
                     <!------------td with hidden div and appears only when mouse hover---------->
      echo "<td class='prbk' data-id='".$pr_stats."'><a href='#'>".$pr_stats."%</a>";
      echo "<div>
            Data:  123<br>
            Data: Asdwqeasd<br>
            Data: 525</a>
          </div></td>";
      
      echo "<td>".$bp_stats."%</td>";
      echo "<td>".$ep_stats."%</td>";                       
      echo "<td>".$update_date."</td>";
      echo "</tr>";
      
      }
      ?>
  </tbody>
</table>

JS：

$('#pic_table').DataTable({

  columnDefs: [
    /**************** to have HTML tags removed for sorting/filtering*********/
    {
      targets: 0,type: 'html'
    }
  ],initComplete: function () {
    /************add filter header to each column************/
    var i = 0;
    this.api().columns().every(function () {
      var column = this;
      var select = $('<select><option value="">All</option></select>')
        .appendTo($('.filterhead').eq(i).empty())
        .on('change',function () {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search(val ? '^' + val + '$' : '',true,false)
            .draw();
        });

      column.data().unique().sort().each(function (d,j) {
        if (column.index() == 2) {
          d = $(d).text();
        }
        select.append('<option value="' + d + '">' + d + '</option>')
      });
      i++;
    });
  }

});

/*******************************Hover**********************************/

var span = document.querySelectorAll('.prbk');
hideAll();

for (var i = span.length; i--;) {
  (function () {
    var t;
    span[i].onmouSEOver = function () {
      hideAll();
      clearTimeout(t);
      this.className = 'hoverbghover';
    };
    span[i].onmouSEOut = function () {
      var self = this;
      t = setTimeout(function () {
        self.className = 'hoverbg';
      },300);
    };
  })();
}

function hideAll() {
  for (var i = span.length; i--;) {
    span[i].className = 'hoverbg';
  }
};

错误屏幕截图

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）