javascript - HTMLでjquery/javascript/cssを使用したテーブルのフィルタリング、ソート、個別のレコード

Question

HTML ページには 6 つのタブ、つまり A、B、C、D、E、F と 2 つのドロップダウンがあります。

動作動作: ユーザーは 2 つのドロップダウンから 1 つの値を選択します。次に、選択した値に基づいて、各テーブルに存在する 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) 2 番目のドロップダウンから最初の値を選択すると、フィルタリングが行われていないため、変更イベントは呼び出されません。これを解決するには？

3)オプション (A、B、C ..) ごとにタブを作成し、ドロップダウン値を選択した後、ユーザーがタブに移動すると、列が表示されるはずです。B タブが選択されている場合、B 列が表示されます。ドロップダウンで選択した値に基づいて値を表示する必要があります。
ナビゲーションタブを含む 1 つの HTML ページを作成しましたが、それをこれと統合する方法がわかりません。

score 1 · Accepted Answer

これを試すことができます（例）

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

javascript - HTMLでjquery/javascript/cssを使用したテーブルのフィルタリング、ソート、個別のレコード

1 に答える 1

Related

Reference