显示用户选择中的某些表行
Show Certain Table Rows From User Selection
我想根据从下拉列表中选择的用户来显示HTML表的某些行。截至目前,我只能让它显示整个表格,而不仅仅是所选球队的球员。
现在我有一个"显示/隐藏"按钮,我想从下拉列表中读取选择,保留所选球队中的所有球员并从表格中隐藏所有其他行。截至目前,我手动将其设置为"波士顿凯尔特人",以便该团队中的任何人都隐藏在列表中。我怎样才能将其重写为:
-
自动使用从下拉列表中选择的团队,而不是像我目前那样输入它?
-
反转逻辑并保留下拉列表中选择的球队中的球员?
function selectTeamOne() {
var teamlist1 = document.getElementById("teamList1");
document.getElementById("selectedTeamOne").value = teamlist1.options[teamlist1.selectedIndex].text;
}
function team1Click() {
$('td:contains("Boston Celtics")').parent().toggle();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Select Team 1:
<select id="teamList1" onchange="selectTeamOne()">
<option>Atlanta Hawks</option>
<option>Boston Celtics</option>
<option>Brooklyn Nets</option>
<option>Charlotte Hornets</option>
<option>Chicago Bulls</option>
<option>Cleveland Cavaliers</option>
<option>Dallas Mavericks</option>
<option>Denver Nuggets</option>
<option>Detroit Pistons</option>
<option>Golden State Warriors</option>
<option>Houston Rockets</option>
<option>Indiana Pacers</option>
<option>Los Angeles Clippers</option>
<option>Los Angeles Lakers</option>
<option>Memphis Grizzlies</option>
<option>Miami Heat</option>
<option>Milwaukee Bucks</option>
<option>Minnesota Timberwolves</option>
<option>New Orleans Pelicans</option>
<option>New York Knicks</option>
<option>Oklahoma City Thunder</option>
<option>Orland Magic</option>
<option>Philadelphia 76ers</option>
<option>Phoenix Suns</option>
<option>Portland Trailblazers</option>
<option>Sacramento Kings</option>
<option>San Antonio Spurs</option>
<option>Toronto Raptors</option>
<option>Utah Jazz</option>
<option>Washington Wizards</option>
</select>
</form>
<input type='button' value='Hide/Show' onclick="team1Click()" />
<table id="mytable">
<thead>
<tr>
<th>Player</th>
<th>Team</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>C.J. McCollum</td>
<td>Boston Celtics</td>
<td>$3,302,849
</td>
</tr>
<tr>
<td>Dennis Schroeder</td>
<td>Boston Celtics</td>
<td>$2,616,965
</td>
</tr>
<tr>
<td>Isaac Fotu</td>
<td>Boston Celtics</td>
<td>$473,604
</td>
</tr>
<tr>
<td>JaVale McGee</td>
<td>Boston Celtics</td>
<td>$11,000,000
</td>
</tr>
<tr>
<td>Carmelo Anthony</td>
<td>Boston Celtics</td>
<td>$20,571,468
</td>
</tr>
<tr>
<td>Thomas Robinson</td>
<td>Boston Celtics</td>
<td>$3,000,000
</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>Boston Celtics</td>
<td>$3,000,000
</td>
</tr>
<tr>
<td>Russell Westbrook</td>
<td>Boston Celtics</td>
<td>$17,769,374
</td>
</tr>
<tr>
<td>J.R. Smith</td>
<td>Boston Celtics</td>
<td>$5,000,000
</td>
</tr>
<tr>
<td>Jeff Withey</td>
<td>Boston Celtics</td>
<td>$885,120
</td>
</tr>
<tr>
<td>Eric Moreland</td>
<td>Boston Celtics</td>
<td>$792,682
</td>
</tr>
<tr>
<td>David Wear</td>
<td>Boston Celtics</td>
<td>$792,682
</td>
</tr>
<tr>
<td>Bismack Biyombo</td>
<td>Boston Celtics</td>
<td>$9,733,352
</td>
</tr>
<tr>
<td>Carl Landry</td>
<td>Boston Celtics</td>
<td>$1,229,255
</td>
</tr>
<tr>
<td>Mo Williams</td>
<td>New York Knicks</td>
<td>$5,215,311
</td>
</tr>
<tr>
<td>Trevor Booker</td>
<td>New York Knicks</td>
<td>$1,069,509
</td>
</tr>
<tr>
<td>Lester Hudson</td>
<td>New York Knicks</td>
<td>$915,852
</td>
</tr>
<tr>
<td>Blake Griffin</td>
<td>New York Knicks</td>
<td>$20,140,838
</td>
</tr>
<tr>
<td>Patrick Patterson</td>
<td>New York Knicks</td>
<td>$992,680
</td>
</tr>
<tr>
<td>Jabari Brown</td>
<td>New York Knicks</td>
<td>$762,195
</td>
</tr>
<tr>
<td>Victor Oladipo</td>
<td>New York Knicks</td>
<td>$6,722,262
</td>
</tr>
<tr>
<td>Kaleb Tarczewski</td>
<td>New York Knicks</td>
<td>$492,548
</td>
</tr>
<tr>
<td>George Hill</td>
<td>New York Knicks</td>
<td>$8,000,000
</td>
</tr>
<tr>
<td>Eric Maynor</td>
<td>New York Knicks</td>
<td>$2,090,000
</td>
</tr>
<tr>
<td>Robin Lopez</td>
<td>New York Knicks</td>
<td>$5,000,000
</td>
</tr>
<tr>
<td>Kris Humphries</td>
<td>New York Knicks</td>
<td>$1,352,181
</td>
</tr>
<tr>
<td>Earl Clark</td>
<td>New York Knicks</td>
<td>$1,069,509
</td>
</tr>
<tr>
<td>Dominic McGuire</td>
<td>New York Knicks</td>
<td>$1,069,509
</td>
</tr>
<tr>
<td>Tony Snell</td>
<td>New York Knicks</td>
<td>$885,120
</td>
</tr>
</tbody>
</table>
尝试以下代码以根据下拉所选值切换可见性
function team1Click() {
var SelVal = $('#teamList1').find(':selected').text();
var table = $('#mytable tbody tr');
$.each(table, function (i) {
if ($(table[i]).find('td:eq(1)').text().toLowerCase().trim() == SelVal.toLowerCase().trim()) {
$(table[i]).hide();
}
else
$(table[i]).show();
});
}
在你的第一个函数 selectTeamOne 中,你正在寻找一个 id 为"selectedTeamOne"的元素,但这个元素在你发送的形式中不存在。
document.getElementById("selectedTeamOne").value = teamlist1.options[teamlist1.selectedIndex].text;
既然你用jQuery标记了这个问题,我将使用jQuery而不是纯javascript来回答它。它应该回答您的 A) 和 B) 子点。
在 selectTeamOne() 事件处理程序中,您可以使用
var selectedTeamName = $('#teamList1 option:selected').text();
为了得到所有不属于这支球队的球员,我会再次使用 jQuery 选择第二个 td 与所选球队名称不匹配的所有 tr
$('#mytable tr').filter(function(index, element) {return !$('td:eq(1):contains("' + selectedTeamName + '")', element);}).hide()
filter 函数使用 jquery 选择器上下文参数(即元素)将搜索上下文化,并将其限制为当前正在评估的 tr,并且它只是反转当前所选球队的球员搜索结果。
最后,此筛选结果集通过调用隐藏而被隐藏。
显然,您还应该显示当前选定的团队,使用相同的代码,但没有否定子句并调用 show() 而不是 hide ()
$('#mytable tr').filter(function(index, element) {return $('td:eq(1):contains("' + selectedTeamName + '")', element);}).show()
相关文章:
- d3基于用户选择动态更新节点
- 获取用户选择的不带时区的日期
- 如何使用javascript localStorage保存用户选择并在不同的html页面中显示
- jQuery根据用户选择启用/禁用asp.net控件
- 将用户选择添加到数组中
- 将用户选择的数据临时存储在我的阵列中
- 如果用户选择离开网页,如何删除记录
- 根据用户选择选择页面
- 如何根据用户选择动态更改多个复选框的编号
- 谷歌地图 - 用户选择不允许位置
- 根据用户选择获取 JSON 密钥
- 根据用户选择的输入编写 html 文本
- Hangman游戏将用户选择的字母与单词中的字母进行比较以进行猜测
- Javascript确认,捕获用户选择
- 获取用户选择的选项的值
- NodeJS+JS:根据当前用户选择生成动态链接
- 使用用户选择动态更新页面
- html5文件api,将用户选择的目录存储在sessionStorage中
- 如何根据用户选择顺序重新排序多选的值
- PHP根据用户选择的项目以模式加载数据