javascript - 在 html 中使用 jquery/javascript/css 进行表过滤、排序、不同记录

Question

html 页面中将有 6 个选项卡，即 A、B、C、D、E、F 和 2 个下拉菜单。

工作行为是:用户将从 2 个下拉列表中选择一个值。然后根据选择的值，需要对每个表中存在的 html 表应用过滤。`

var options = $("#comboB").html();
$("#comboA").change(function(e) {
    var text = $("#comboA :selected").text();
    alert(text);
    $("#comboB").html(options);
    $('#comboB :not([value^="' + text + '"])').remove();

});
$("#comboB").change(function(e) {
    var text = $("#comboB :selected").text();
    alert(text);
    var allRows = $("tr");
    allRows.hide();
    $("tr:contains('" + text + "')").show();

});



<div class="dd">
<select id="comboA">
<option value="">Select Value</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>    
</select>

<select id="comboB">
<option value="">Select Value</option>
<option value="A">A 1</option>
<option value="A">A 2</option>
<option value="A">A 3</option>
<option value="B">B 1</option>
<option value="B">B 2</option>
<option value="B">B 3</option>
<option value="B">B 4</option>
<option value="C">C 1</option>
<option value="D">D 1</option>
<option value="D">D 2</option>
<option value="E">E 1</option>
<option value="E">E 2</option>
<option value="E">E 3</option>
<option value="E">E 4</option>
<option value="F">F 1</option>
<option value="F">F 2</option>
<option value="F">F 3</option>
<option value="F">F 4</option>
<option value="F">F 5</option>
<option value="F">F 6</option>
</select>
</div>
<div class="tbdata">
<table id="Fdata" border="1">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
    </tr>
    <tr>
        <td class="A">A 2</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 6</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 6</td>
    </tr>   
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 6</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 2</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 6</td>
    </tr>   
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 2</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 2</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 4</td>
    </tr>

</table>
</div>

Link to code that I have tried so far .

现在我不确定如何做以下事情。

1) 假设用户从下拉列表中选择了任何值，那么我就可以过滤 html 表。如果用户选择了 F，那么只有 F 列应该是可见的。也只应显示不同的值(有重复值)

2) 如果我从第二个下拉列表中选择第一个值，则不会调用更改事件，因为过滤没有发生。如何解决这个问题？

3) 我必须为每个选项(A、B、C..)创建选项卡，并在选择下拉值后，如果用户转到 A 选项卡，则应显示 A 列。如果选择 B 选项卡，则应显示 B 列。它应该根据下拉列表中选择的值显示值。
我创建了一个带有导航选项卡的 html 页面，但不确定如何将其与此集成。

Answer 1

你可以试试这个 ( Example )

var options = $("#comboB").html();
    $("#comboA").change(function(e) {
    var text = $("#comboA :selected").text();
    $("#comboB").html(options);
    $('#comboB :not([value^="' + text + '"])').remove();
    $("#comboB").prepend($('<option/>', { 'html':'Select Value' }));
    $("table#Fdata tr").show().find('td').show();
});

$("#comboB").change(function(e) {
    if($(this).find('option:selected').text() == 'Select Value') return;
    var text = $("#comboB :selected").text();
    $("table#Fdata tr").show().find('td').show();
    $("table#Fdata tr").not("tr:contains('" + text + "')").hide();
    $("table#Fdata tr:visible > td").not("tr td:contains('" + text + "')").hide();
});

您正在过滤(显示)tr，因此在 tr 中可能有一些 td 包含选定文本以外的内容。