我正在使用“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>
最佳答案
你限制了 .container div 的宽度
这使得表格处于最小宽度，因此无法对列进行任何操作。
相反，如果您将 .container 宽度设置为 90% 或 100%，它会起作用
.container { width: 100%; margin: 0 auto;}
关于javascript - HTML CSS 无法更改表格列宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24110127/