使用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>

鏈接到我到目前為止嘗試過的代碼 。

現在我不確定該怎么做。

1）假設用戶從下拉列表中選擇了任何值，那么我能夠過濾html表。 如果用戶選擇了F，則僅F列應可見。 另外，僅應顯示不同的值（有重復的值）

2）如果我從第二個下拉列表中選擇第一個值，則由於未發生過濾而未調用change事件。 如何解決呢？

3）我必須為每個Option（A，B，C ..）創建選項卡，並選擇下拉值后，如果用戶轉到A選項卡，則應顯示A列。 如果選擇了B選項卡，則應顯示B列。 它應基於在下拉菜單中選擇的值來顯示值。
我創建了一個帶有導航選項卡的html頁面，但不確定如何將其與此集成。

Answer 1

您可以嘗試一下（ 示例 ）

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包含選定文本以外的其他內容。