顯示某些錶行來自用戶的選擇

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()