Question

我正在使用“http://dotnetprof.blogspot.com/2012/08/html-table-search-using-javascript.html”中的一些代码来帮助我为我的网站构建一个可搜索的表格。

我在编辑列宽时遇到问题。我尝试了几种不同的方法，包括使用“col style =”width：5％;“如下所示。

代码中是否有一些功能可以自动调整列宽，以便我无法编辑它们？我已经看过这里发布的所有类似问题的解决方案，但没有一个有效。任何帮助表示赞赏。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seacrh HTML table using Javascript</title>

<style type="text/css">
    body { font-family: Verdana; font-size: 12pt; }
    .container { width: 35%; margin: 0 auto; }
    .search_box { padding: 1.5%; font-family: Verdana; font-size: 12pt; }
</style>

<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>
</head>
<body>
<div class="container">
    <h2>Seacrh HTML table using Javascript</h2>
    <input type="text" id="searchTerm" class="search_box" onkeyup="doSearch()" />
    <!--<input type="button" id="searchBtn" value="Search" class="search_box"     onclick="doSearch()" />-->
    <br /><br />
    <table id="dataTable" border="1" width="100%" cellspacing="0" cellpadding="5">
        <col style="width:5%;"></col>
        <col style="width:30%"></col>
        <col style="width:100%"></col>
        <col style="width:55%"></col>
        <col style="width:5%"></col>
        <thead>
        <tbody>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Dates Lived</th>
                <th>Comments</th>
                <th>Rating</th>
            </tr>
        </thead>
        <tr>
            <td>Nikhil Vartak</td>
            <td>4224 3rd St., San Francisco, CA 94112</td>
            <td>3/3/2000-4/7/2004</td>
            <td>Fantastic</td>
            <td>3/5</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Answer 1

你正在限制.container div的宽度

使表格处于最小宽度，因此不能对列进行任何操作。

如果您将.container宽度设置为90％或100％，则可以

http://jsfiddle.net/pE2f5/

 .container { width: 100%; margin: 0 auto;}

HTML CSS无法更改表列宽度

1 个答案: