如何使用select下拉列表筛选表TD值
使用select下拉列表筛选表TD值的方法如下：
- 首先，在HTML中创建一个select元素，用于显示下拉列表选项。例如：
<select id="filterSelect">
<option value="all">全部</option>
<option value="value1">值1</option>
<option value="value2">值2</option>
<option value="value3">值3</option>
</select>- 在JavaScript中，获取select元素并添加事件监听器，以便在选择项发生变化时触发筛选操作。例如：
var select = document.getElementById("filterSelect");
select.addEventListener("change", filterTable);- 创建一个filterTable函数，用于根据选择的选项筛选表格中的TD值。在该函数中，获取表格和所有的TD元素，并遍历每个TD元素进行筛选。根据选择的选项，显示或隐藏符合条件的TD元素。例如：
function filterTable() {
var selectedValue = select.value;
var table = document.getElementById("myTable");
var tds = table.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
var tdValue = td.textContent || td.innerText;
if (selectedValue === "all" || tdValue === selectedValue) {
td.style.display = "";
} else {
td.style.display = "none";
}
}
}在上述代码中，假设表格的id为"myTable"，每个TD元素包含要筛选的值。
- 最后，在页面加载完成时调用filterTable函数，以便初始化表格的筛选状态。例如：
window.onload = function() {
filterTable();
};这样，当选择下拉列表中的选项时，表格中的TD值将根据选择的选项进行筛选显示。
注意：以上代码仅为示例，实际应用中可能需要根据具体情况进行适当修改和调整。
推荐的腾讯云相关产品：无
相关·内容
1回答
在javascript中过滤表
javascript、html
我试图使用一个JavaScript函数过滤一个表，但是我不知道is...When单击filter链接会产生什么问题，什么都不会发生，但是它应该过滤第二列("Platform“列)，并且只显示带有"TEST”的行。
我试图在这里调试它：
function filterTable(input) {
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var tr = table.getEleme
浏览 0提问于2021-08-04得票数 1
回答已采纳
1回答
使用javascript在多个表上创建搜索函数
php、html、css、mysql、phpmyadmin
我是个新开发人员。我现在正在对多个表执行搜索功能。问题是，当我搜索时，它只显示职务名称，而不是在同一个表中显示全部信息。输出应该显示工作信息和搜索的职务名称。希望你们能帮我。提前谢谢你!！下面是我在搜索之前和之后的当前输出，并附有代码。
搜索前的
搜索后
代码
<!DOCTYPE html>
<html>
<head>
<title>My Job</title>
<script>
//searching
function myFuncti
浏览 1提问于2020-07-07得票数 1
回答已采纳
4回答
当<table>行中<td>中的<input>被切换为隐藏/显示为无/块时，如何修复<tr>中的列位置
javascript、html、css
我的2x2表中的列数根据select中选择的值1或2进行扩展或收缩。目前，随着列数的增加或减少，屏幕上的列位置会发生剧烈的变化。无论一行中出现多少列，如何修复屏幕上的列？ function myFunction() {
var x = document.getElementById("mySelect").value;
var tbl = document.getElementById("myTable");
var row = tbl.getElementsByTagName("tr");
switch (x) {
浏览 74提问于2020-09-26得票数 3
回答已采纳
1回答
如何使用javascript过滤html表格而无需重新加载页面？
javascript、jquery
我有这些代码已经使用纯javascript的工作，并得到它在W3schools中使用输入文本过滤表数据。我添加了一个Select dropdown for filtering表。我在这里找到了一些答案，但它不适用于我的代码。 我试着使用Jquery，但它不起作用。JQUERY CDN位于头部 <head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
浏览 4提问于2019-10-09得票数 2
回答已采纳
2回答
禁用下拉列表选项和其他下拉列表选项
javascript、jquery、html、list、dropdown
下面是我要做的:如果我从下拉列表"selectOption1“中选择了什么，我想在另一个下拉列表"selectOption2”中设置一个选项为“不可见”。不幸的是，我无法正确地处理另一个列表中的元素。
multiCapture.html
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl = document.get
浏览 0提问于2018-09-14得票数 1
回答已采纳
2回答
在HTML表中搜索和排除行
javascript、html、jquery、css、html-table
我有一个有一千多行的HTML表，而且它只会变大。我使用这个函数搜索表中的数据。
function mySFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("mySInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("
浏览 4提问于2021-02-16得票数 0
回答已采纳
2回答
使用innerhtml显示下拉列表文本而不是值
javascript、jquery、html、html-table、innerhtml
我有一个下拉列表，其函数如下： car_list.options1 =新选项(‘Mazda’，'A_Mazda')； 为了区分，我将A_Mazda作为下拉列表的值。现在，我有了一个按钮，它将在表视图中显示下拉列表的值。我想要显示的是下拉列表的文本，而不是值。函数addRow()是我用来以表格形式显示下拉列表值的方法。到目前为止，当按钮被剪切时，显示的是A_Mazda而不是马自达。请帮帮忙 function addRow(){
var table = document.getElementById("result-table");
var rowCoun
浏览 19提问于2019-02-19得票数 4
回答已采纳
2回答
如何清除过滤器表js上的过滤器？
javascript、html、css、filter
我向表中添加了一个搜索栏，其目标是过滤表行。filter函数工作得很好，当我关闭搜索栏时，它会清除文本，但是当我关闭搜索栏时，筛选器就不会被清除，直到我再次打开搜索栏并再次键入某些内容时，表才会被过滤。我尝试过添加多个js函数，当我关闭搜索栏时，这些函数应该清除过滤器，但是没有任何效果。
以下是过滤函数的js：
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput&
浏览 8提问于2022-09-08得票数 0
1回答
过滤带有选择下拉列表的html表列
javascript、html、jquery、filter、html-table
我正在尝试创建一个表，它可以根据列中的值过滤每一列。我希望每个下拉列表只与列相关联，所以就像第一个下拉列表只查看第一列一样。我发现javascript代码可以很好地工作，但是只有当每个值都是唯一的时候。我的表在每一行/列中基本上都是“是/否”，我认为我找到的代码不能按我所希望的方式工作的原因是因为这些值并不是唯一的。OK/NO的第一列起作用，但在指定yes/no时查看其他列时会出现问题。如果我选择OK，不，是的，在3个下拉列表中，它应该只显示一行，这是第一行，但它也显示了第三行。第一行是OK，不，是的，第三行是OK，不，不。所以问题是，在第三行的第三列中，它不是，但在从第三个下拉列表中指定ye
浏览 1提问于2021-04-07得票数 0
回答已采纳
1回答
在JavaScript中使用多列过滤表数据
javascript、php、html、mysql
我正在尝试制作一个过滤器/搜索表，并且我使用的是来自的
下面是剧本：
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElement
浏览 10提问于2021-12-05得票数 0
回答已采纳
2回答
向动态创建的下拉列表添加点击功能
javascript、html
我有一个从数组创建下拉列表的函数
function populateDropdown(){
var select = document.getElementById("dropdownList");
var array = ["1", "2", "3"];
for(var i =0; i < array.length; i++)
{
var opt = array[i]
var ele = document.createElement("opti
浏览 0提问于2016-09-13得票数 0
1回答
设置<select>元素的默认值
javascript、html
我的网页中有一个表格，它捕获了以前订单历史的详细信息。该表有以下列：
订购日期审查
现在，对于评审，我希望有一个选择下拉列表和一些选项。当用户第一次启动页面时，我希望前面的评级在select下拉列表中显示为默认值。下面是我的代码：
tds.push( {
content: '<select id="clientReview" name="clientReview" value=' + obj.get("client_review") + '>' +
'<option val
浏览 3提问于2012-09-23得票数 3
回答已采纳
3回答
筛选包含链接的html表
html、html-table
基于How to filter a html table using simple javascript?，我想用链接到urls的单元格来过滤我的html表格。如何防止后台urls也被过滤？ 在下面的示例中，当我搜索"sweden“时，它也显示”德国“，因为"Germany”链接到表中的https://germany.net/sweden function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
浏览 26提问于2020-12-11得票数 1
回答已采纳
2回答
要在从下拉菜单中选择后使用更新的SQL语句刷新页面
php、html、jquery、sql、ajax
我曾多次尝试谷歌，并在其他类似的堆栈溢出帖子中搜索，但我真的找不到对我有帮助的东西
我试图让我的站点刷新和更新我的表值，并且只显示那些与下拉菜单相等的值。当我输入页面时，我希望它能像现在一样显示所有内容，然后在选择CustomerCountryCode 时更新站点和SQL语句。
History.php ( WHERE应该是$_POST‘’SelectedValue‘而不是'DK')
if (isset($_POST['SelectedValue'])) {
$sql = "SELECT * FROM [CampaignModule].[dbo]
浏览 5提问于2021-11-30得票数 0
回答已采纳
3回答
在JavaScript中创建一个具有默认值的动态选择列表
javascript、jquery
我不想创建一个动态下拉菜单，默认选择的值。从下拉菜单创建可以正常工作，但是当我设置默认值时，这是行不通的。默认值仅为最后一个下拉列表设置。我要创造一个例子：
let brand = [{
"brand": "audi"
},
{
"brand": "mercedes"
}
]
$(document).ready(function() {
createTableBody()
})
function createTableBody() {
var table = document.getEl
浏览 3提问于2021-04-29得票数 0
回答已采纳
2回答
如何在我的代码中进一步使用生成的id (javascript)
javascript、html
我使用的是javascript。在我的代码中(如下所示)，表格是通过在每个单元格中保存输入字段来生成的，ID是为每个输入字段生成的。
实际上，我需要访问生成的id_name来更改样式(颜色、字体大小等...)对于每个输入值。
function myFunction() {
//getting no. of cols and rows
var cols = document.getElementById("id1").value;
var rows = document.getElementById("id2").value;
//ta
浏览 9提问于2019-08-12得票数 0
回答已采纳
2回答
"Show All“不会重新绘制/刷新表格
javascript、datatables
我已经创建了一个带有静态表的HTML页面。我使用DataTables jQuery库来帮助更轻松地搜索表。我创建了一个下拉菜单，通过"Categories“列(第2列)筛选该表。筛选器对所有内容都有效，除非我在通过选择另一个选项对表进行筛选后选择了“全部”选项。我想让表重新绘制，但似乎不能让它工作。以下是我的代码(实际的表是3倍长，但我在这个问题上缩短了它)： HTML： <section id="autocad-table">
<div class="table-container">
浏览 11提问于2021-07-20得票数 2
回答已采纳
1回答
下拉选择将填充多个其他下拉列表
javascript
颜色下拉列表中的选择应根据选择的颜色填充特定、替代和阴影下拉列表。当只有一个下拉列表需要填充时，我必须填充下拉列表的代码才能正常工作。我怎样才能让它填充多个下拉列表呢？
我的例子：
<table>
<tr>
<td>
Color: <select id="color">
<option value="blue">Blue</option>
<option value="green">Green</option>
<opti
浏览 0提问于2018-01-04得票数 0
1回答
使用javascript中的for循环总结html表列的值
javascript、php、jquery、html、for-loop
我有一个包含两个列的HTML表，这些列由一个ajax php查询来更新。这一切都很好，但是每次表获得一个新条目时，我都想总结出正确的列(Your Calories)。
对于总价值，我创建了一个只有一行和两列的新表。
当我第一次单击add按钮时，总数是0，尽管“您的卡路里”列中已经有一个值。如果我向表中添加第二行，它将返回第一个条目的值。如果我在表中加上第三行，它就总结了第一行和第二行。所以总是少了一行我不明白为什么..。
这是我的html代码：
<input id="food" name="food" value="Choose your Foo
浏览 2提问于2016-05-22得票数 0
回答已采纳
2回答
生成的表中列的总和
php、javascript、jquery、html、mysql
我试图在生成的HTML表中获取一列中的数据总和。
该表从MySQL获取yt_id，并使用JSON从YT Api获取数据(该表是自动生成的)
下面是我的代码：
<html>
<?php
include_once('db.php');
$result = mysql_query("select * from yt_data");
echo "<table border='1'>
<tr>
<th>ID</th>
<th>Views</th>
<
浏览 0提问于2013-09-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
