Question

我一直在看这个问题： JQuery Expand Table - adding additional columns

和 FIDDLE ： http://jsfiddle.net/sB5g9/1/

这就是我想要的，因为它根据所选的下拉列表显示了一个新的tr。然而，小提琴示例有2个选项，View＆amp;另外，我想要3或4个选项。

我尝试在select中添加新条目并通过ID访问它们但它无法正常工作。

如果我想要查看，附加，测试和支持并且有附加功能，测试和支持会根据所选择的内容显示不同的TR's吗？

UPDATE 选择一个选项时，应隐藏其他选项。

由于

Answer 1

根据jsFiddle中给出的示例，您可以这样做：

<强> HTML

<table id="results">
    <tr>
        <th>Select</th>
        <th>Population</th>
        <th>Area</th>
        <th>Official languages</th>
        <th>Other</th>
    </tr>
    <tr class="selector">
        <td>
            <select name='mode' class='mode'>
                <option value='0'></option>
                <option value='1'>View</option>
                <option value='2'>Additional</option>
                <option value='3'>My New Option</option>
            </select>
        </td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>Additional Settings</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>My New Option</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="selector">
        <td>
            <select name='mode' class='mode'>
                <option value='0'></option>
                <option value='1'>View</option>
                <option value='2'>Additional</option>
                <option value='3'>My New Option</option>
            </select>
        </td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>Additional Settings</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>My New Option</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="selector">
        <td>
            <select name='mode' class='mode'>
                <option value='0'></option>
                <option value='1'>View</option>
                <option value='2'>Additional</option>
                <option value='3'>My New Option</option>
            </select>
        </td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>Additional Settings</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
    <tr class="hidden">
        <td><b>My New Option</b></td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>English</td>
    </tr>
</table>

<强> CSS

#results .hidden {
    display: none;
}

Javascript（jQuery）

$(function () {    
    $('.mode').change(function () {
        var opt = +$(this).val();
        var thisParent = $(this).parents("tr");        
        var thisParentPos = $('#results .selector').index(thisParent);
        var posToDisplay = opt - 2;    

        if (posToDisplay >= 0) {
            thisParent.nextAll('.hidden').eq(posToDisplay).show();
        }
    });
});

请注意，我已向option添加了第3个select，您可以根据需要添加第3个{。}}。

Answer 2

您可以根据您可以显示的索引或相应地隐藏行来使用为其选择下拉列的行的rowindex。

我已经制作了一个包含所有必需值的样本，并相应地显示。只需将类应用于行并根据行的顺序更改下拉列表的值字段，它就会很好用。

HTML：

<table id="results">
    <tr>
        <th>
            Select
        </th>
        <th>
            Value
        </th>
    </tr>
    <tr>
        <td>
            <select name='mode' class='mode'>
            <option value='1'></option>
            <option value='2'>View</option>
            <option value='3'>Additional</option>
            <option value='4'>Test</option>
            <option value='5'>Support</option>
            </select>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="View">
        <td>
            <b>View</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Additional">
        <td>
            <b>Additional</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Test">
        <td>
            <b>Test</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Support">
        <td>
            <b>Support</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr>
        <td>
            <select name='mode' class='mode'>
            <option value='1'></option>
            <option value='2'>View</option>
            <option value='3'>Additional</option>
            <option value='4'>Test</option>
            <option value='5'>Support</option>
            </select>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="View">
        <td>
            <b>View</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Additional">
        <td>
            <b>Additional</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Test">
        <td>
            <b>Test</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
    <tr class="Support">
        <td>
            <b>Support</b>
        </td>
        <td>
            306,939,000
        </td>
    </tr>
</table>

SCRIPT：

 $(document).ready(function () {
        $(".View,.Additional,.Test,.Support").css("display", "none");
        $("select.mode").change(function () {
            //$(".View,.Additional,.Test,.Support").css("display", "none");
            $('tr:gt(' + $(this).parent().parent().index() + '):lt(' + parseInt($(this).parent().parent().index() + ($(this).find("option").length - 2)) + ')').css("display", "none");
            $("tr:nth-child(" + ($(this).parent().parent().index() + parseInt($(this).val())) + ")").css("display", "block");
        });
    });

希望这会有所帮助：）

Jquery显示tr基于下拉列表

2 个答案: