Question

我想根据下拉列表中用户的选择来显示HTML表的某些行。截至目前，我只能让它显示整个牌桌，而不仅仅是选定球队的球员。

现在我有一个“显示/隐藏”按钮，我想从下拉列表中读取选择，让所有玩家远离所选团队并隐藏表格中的所有其他行。截至目前，我已将其手动设置为“Boston Celtics”，以便该团队中的任何人都可以从列表中隐藏。我怎样才能将其重写为：

自动使用从下拉列表中选择的团队，而不是像我现在那样输入？
撤消逻辑并保留下拉列表中所选团队的玩家？

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

Answer 2

在你的第一个函数selectTeamOne中，你正在寻找一个id为＃34; selectedTeamOne＆＃34;的元素。但是这个元素在你发送的形式中不存在。

import javax.swing.JFrame;
public class main {

  public static void main(String[] args) {
    // TODO Auto-generated method stub

    Guiii o = new Guiii();
    o.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    o.setSize(300,200);
    o.setVisible(true);
  }
}

由于您使用jQuery标记了问题，我将使用jQuery而不是纯javascript来回答它。它应该回答你的A）和B）子点。

在selectTeamOne（）事件处理程序中，您可以使用

读取所选团队的名称

document.getElementById("selectedTeamOne").value = teamlist1.options[teamlist1.selectedIndex].text;

为了让所有不属于这个团队的玩家，我再次使用jQuery来选择第二个td与selectedTeamName不匹配的所有tr

var selectedTeamName = $('#teamList1 option:selected').text();

过滤器函数使用jquery选择器上下文参数（即元素）来对搜索进行上下文化并将其限制为它当前正在评估的tr，并且它简单地反转搜索当前所选团队的玩家的结果。

最后，这个过滤后的结果集会被隐藏调用隐藏起来。

显然你也应该显示当前选中的团队，使用相同的代码，但不使用negating子句并调用show（）而不是hide（）

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

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

2 个答案: