显示某些表行来自用户的选择

Question

我想说明基于用户从下拉列表中选择一个HTML表格的某些行。就目前而言，我只能让它显示整个桌子，而不仅仅是来自选定团队的选手。

现在我有一个“显示/隐藏”按钮，我想从表中读取从下拉列表中选择，请从选定队所有球员和隐藏所有其他行。截至目前，我已将其手动设置为“波士顿凯尔特人队”，以便该队中的任何人都不在名单中。我怎样才能重新写这：

1. 使用从下拉列表中选择的球队将自动而不是它的类型像我现在做什么？

2. 反向逻辑，并从下拉列表中选择球队保住球员呢？

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>

Answer 1

试试下面的代码来切换基于下拉知名度选择值

​​

Answer 2

在你的第一个功能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再去选择所有TR其中第二TD不将selectedTeamName匹配

$('#mytable tr').filter(function(index, element) {return !$('td:eq(1):contains("' + selectedTeamName + '")', element);}).hide() 

滤波器函数使用jQuery选择上下文参数（即元素）的背景情况的搜索，并将其限制在它目前正在评估的TR，其简单地颠倒搜索结果对于当前选择的球队的球员。

到底该过滤的结果集获取与调用隐藏隐藏。

很明显，你也应该显示当前选中的团队，使用相同的代码，但没有否定句和调用显示（），而不是隐藏（）

$('#mytable tr').filter(function(index, element) {return $('td:eq(1):contains("' + selectedTeamName + '")', element);}).show()