html td表搜索

Question

问题是如何在表格的某一栏中进行搜索

我使用以下js脚本和输入标记：

<script type="text/javascript">
    function doSearch() {
        var searchText = document.getElementById('searchTerm').value;
        var targetTable = document.getElementById('dataTable');
        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>

我想修改此脚本以仅在所需列中搜索

Answer 1

变化：

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

改为使用特定的列号：

if(colIndex<targetTableColCount) //Ensures the selected column exists

要获取colIndex编号，您可以使用列名作为文本，将索引作为值进行下拉。

<option id="searchID" onchange="UpdateColIndex()">
<select value="0">Column 1</select>
<select value="1">Column 2</select>
</option>
<script>
var colIndex=0;
function UpdateColIndex()
{
    colIndex = document.getElementById("searchID").value;
}
</script>