搜索HTML表格会产生错误的结果

时间:2016-03-16 08:19:44

标签: javascript html

我在HTML表格中搜索时遇到问题。

用于正常工作的代码,但在我添加了一个可扩展行后,它不再起作用了。防爆。添加一行后,我搜索一个不在表上的值,这次搜索给出了最后一行的值。

我该如何解决这个问题?我真的需要我桌子的可扩展行,所以我无法删除它。

以下是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代码:

<table id="report" class="table table-bordered ">
                        <thead>
                          <tr>
                        <th>Track Number</th>
                        <th>Document Title</th>
                        <th>Document Type</th>
                        <th>Date Filled</th>
                        <th> </th>
                          </tr>
                        </thead>
                    <?php while ($row1 = $stmt1->fetch(PDO::FETCH_ASSOC)): ?>
                            <tr>
                                <td><?php echo $row1['tracknum'] ?></td>
                                <td><?php echo $row1['doctitle'] ?></td>
                                <td><?php echo $row1['doctype'] ?></td>
                                <td><?php echo $row1['datefilled'] ?></td>
                                 <td>
                                 <div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
                                 </td>
                            </tr>
                            <tr><td colspan="5">
                            List of Signatories
                            <ul style="list-style-type:circle">

                            <?php 
                            require_once 'dbconfig.php';
                            try {
                            $conn = new PDO("mysql:host=$host;dbname=$dbname",
                                $username, $password);

                            $_tempp1 = $row1['tracknum'];
                            $stmt = $conn->prepare("SELECT statement ");
                            $stmt->bindParam(1, $_tempp1, PDO::PARAM_STR, 30); 
                            $stmt->execute();
                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                                ?>
                            <?php 
                                echo "<li>" . $row['signatoryname'] . "</li>";
                            }
                            } catch (PDOException $pe) {
                            die("Error occurred:" . $pe->getMessage());
                    }
                            ?>
                            <button type="button" class="btnviewpdf btn btn-xs btn-warning"  >
                                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
                            </button>

                            </ul>  
                            </td>
                            </tr>
                    <?php endwhile; ?>

                    </table> 

这是示例代码https://jsfiddle.net/q17cz0o1/

0 个答案:

没有答案