搜索特定的html表列

Question

你好，有人可以幫我這個忙。 搜索有效，但是如何排除要搜索的最后一列？ 我有三列，名字，姓氏和電子郵件。

我想要的是僅使用兩列進行搜索。 並在搜索時排除列電子郵件。 謝謝你，這是我的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>

這是我的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>

我有另一個問題。 我在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>

集成您的代碼后，羅馬先生。 搜索現在按預期進行。 但是當searchterm輸入為空時，我按退格鍵。 變成這樣

https://jsfiddle.net/t6xg97uo/

Answer 1

我相信這應該可以回答您的問題。 我只是在調整要搜索的列數：

            for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {

這是一個例子：

http://codepen.io/anon/pen/PNWNmL

更新資料

好的，我不確定這是否是您所需要的正確解決方法，但是我只是注釋掉了導致退格時顯示該按鈕的代碼。 這是我所做的：

<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>

這是一個jsfiddle：

https://jsfiddle.net/t6xg97uo/1/

Answer 2

解決方案，其中包括您的其他要求（ 表中具有可擴展的行 ）：
-替換嵌套的for循環（通過行列），如下所示：
（您還應該跳過僅包含一個單元格（td）的行）

...
var rowCells = targetTable.rows.item(rowIndex).cells, cellsLen = rowCells.length;
if (cellsLen > 1) {
    for (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 += cellText;
    }
}

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

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