javascript - 显示用户选择的某些表行

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

尝试下面的代码根据下拉菜单选择的值切换可见性

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