Javascript 搜索特定html表列_Javascript_Html

Javascript 搜索特定html表列

javascript html

Javascript 搜索特定html表列,javascript,html,Javascript,Html,喂，有人能帮我吗。搜索正在进行中但如何排除要搜索的最后一列？我有三栏，名字，姓氏和电子邮件我想要的是只使用这两列进行搜索。并在搜索时排除列电子邮件。非常感谢。这是我的javascript代码 <script type="text/javascript"> function doSearch() { var searchText = document.getElementById('searchTerm').value;

喂，有人能帮我吗。搜索正在进行中但如何排除要搜索的最后一列？我有三栏，名字，姓氏和电子邮件

我想要的是只使用这两列进行搜索。并在搜索时排除列电子邮件。非常感谢。这是我的javascript代码

<script type="text/javascript">
        function doSearch() {
            var searchText = document.getElementById('searchTerm').value;
            var targetTable = document.getElementById('report');
            var targetTableColCount;

            //Loop through table rows
            for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++ ) {
                var rowData = '';

                //Get column count from header row
                if (rowIndex == 0) {
                    targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
                    continue; //do not execute further code for header row.
                }

                //Process data rows. (rowIndex >= 1)
                for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
                    var cellText = '';

                    if (navigator.appName == 'Microsoft Internet Explorer')
                        cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
                    else
                        cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;

                    rowData += cellText;
                }

                // Make search case insensitive.
                rowData = rowData.toLowerCase();
                searchText = searchText.toLowerCase();

                //If search term is not found in row data
                //then hide the row, else show
                if (rowData.indexOf(searchText) == -1)
                    targetTable.rows.item(rowIndex).style.display = 'none';
                else
                    targetTable.rows.item(rowIndex).style.display = 'table-row';
            }
        }
    </script>


函数doSearch（）{
var searchText=document.getElementById（'searchTerm'）。值；
var targetTable=document.getElementById（'report'）；
var targetTableColCount；
//循环表行
对于（var rowIndex=0；rowIndex=1）
对于（var colIndex=0；colIndex


这是我的html代码
<input id="searchTerm" class="form-control" placeholder="Enter text" onkeyup="doSearch()">  
  <table id="report" class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>


名字
姓氏
电子邮件
约翰
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com

我还有一个问题。我在html表中添加了一个可扩展行
现在搜索没有给出所需的输出。例如，当我搜索一个不在html表中的值时，它只删除第一行并显示该行的其余部分。这不是正确的输出
<table id="report" class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>

        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>
        <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
        </td>
      </tr>
      <tr><td colspan="4">
        <button type="button" class="btnview btn btn-xs btn-warning"  >
            <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
        </button>
      </td>
      </tr>

      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>
        <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
        </td>
      </tr>
      <tr><td colspan="4">
        <button type="button" class="btnview btn btn-xs btn-warning"  >
            <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
        </button>
      </td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>
        <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
        </td>
      </tr>
      <tr><td colspan="4">
        <button type="button" class="btnview btn btn-xs btn-warning"  >
            <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
        </button>
      </td>
      </tr>
    </tbody>
  </table>


名字
姓氏
电子邮件
约翰
雌鹿
john@example.com
看法
玛丽
教育部
mary@example.com
看法
七月
杜利
july@example.com
看法

罗曼先生，在把你的密码整合到我的密码中之后。搜索正在按预期进行。但当searchterm输入为空，我按backspace键时。事情变成这样了

我认为这应该回答您的问题。我只是在调整搜索的列数：
            for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {

for（var colIndex=0；colIndex<（targetTableColCount-1）；colIndex++）{

以下是一个例子：

更新
好的，我不确定这是否是您正在寻找的正确修复方法，但我只是注释掉了导致按钮在退格时显示的代码。下面是我所做的：
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>

  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>
</tbody>


约翰
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com

下面是一个JSFIDLE：
我相信这应该能回答您的问题。我只是在调整您搜索的列数：
            for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {

for（var colIndex=0；colIndex<（targetTableColCount-1）；colIndex++）{

以下是一个例子：

更新
好的，我不确定这是否是您正在寻找的正确修复方法，但我只是注释掉了导致按钮在退格时显示的代码。下面是我所做的：
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>

  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
    <td>
    <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
    </td>
  </tr>
  <tr>
    <!-- <td colspan="4">
            <button type="button" class="btnview btn btn-xs btn-warning"  >
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
            </button>
          </td> -->
  </tr>
</tbody>


约翰
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com

下面是一个JSFIDLE：
解决方案，包括您的附加需求（表中有一个可扩展的行）：

-替换嵌套的for
循环（通过行-列），如下所示：

（您还应该从处理中跳过只有一个单元格（td）的行）
。。。
var rowCells=targetTable.rows.item（rowIndex.cells），cellsLen=rowCells.length；
如果（cellsLen>1）{
对于（var colIndex=0；colIndex<2；colIndex++）{
var cellText=''；
if（targetTable.rows.item（rowIndex.cells.item（colIndex））{
cellText=rowCells.item（colIndex）[（navigator.appName=='Microsoft Internet Explorer'）？“innerText”：“textContent”]；
}
rowData+=单元格文本；
}
}
//使搜索不区分大小写。
rowData=rowData.toLowerCase（）.trim（）；
searchText=searchText.toLowerCase（）；
//如果在行数据中未找到搜索项
//然后隐藏行，否则显示
如果（cellsLen>1）{
if（searchText&&rowData.indexOf（searchText）=-1）{
targetTable.rows.item（rowIndex.style.display='none'；
}否则{
targetTable.rows.item（rowIndex.style.display='表