关于table表格搜索

<link rel="stylesheet" type="text/css" href="<c:url value='/styles/plugin/bronzesoft.ui.basetable.css '/>"/>
<script type="text/javascript" src="<c:url value='/scripts/plugin/bronzesoft.ui.basetable.js'/>"></script>
<style type="text/css">
#myInput {
    background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
    background-position: 10px 12px; /* 定位搜索按钮 */
    background-repeat: no-repeat; /* 不重复图片 */
    width: 20%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px; 
}
</style>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="项目编号搜索...">
<div>&nbsp</div>
<div>&nbsp</div>
<div style="font-size:20px;color:gray">&nbsp&nbsp项目积分情况:</div>
<div class="main-div">
    <div class="head-div">
        <table class="head-table">
            <tr>
              <th width="300px">项目名称</th>
              <th width="300px">项目编号</th>
              <th width="300px">项目阶段</th>
              <th width="300px">项目成员</th>
              <th width="300px">已获得项目积分</th>
          </tr>
         </table>
    </div>
    <div class="body-div">
        <table class="body-table" id="treeTable">
           <#list detailDatas as item>
            <tr class="body-row">
                <td>${item.projectName}</td>
                <td>${item.projectNo}</td>
                <td>${item.projectPhase}</td>
                <td>${item.projectMember}</td>
                <td>${item.score}</td>
            </tr>
            </#list>
        </table>
    </div>
</div>
<script>
var $table = $(".main-div").table();
function myFunction() {
  // 声明变量
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("treeTable");
  tr = table.getElementsByTagName("tr");
 
  // 循环表格每一行,查找匹配项
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

为什么输入项目编号搜索 输入第一行的BH21SSS搜索没问题  搜其他行的就会像下面一样错误 

你这个搜索不与后台交互吗?

检查一下后台返回的数据格式。错误多半在前端解析

 tr[i].style.display = "";

改成

 tr[i].style.display = "table-row";

 

 

您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

速戳参与调研>>>https://t.csdnimg.cn/Kf0y