显示用户选择中的某些表行

Show Certain Table Rows From User Selection

本文关键字:用户 选择 显示      更新时间:2023-09-26

我想根据从下拉列表中选择的用户来显示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>

尝试以下代码以根据下拉所选值切换可见性

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