Показать / Скрыть &ЛТ;тд&ГТ; другие &ЛТ;тд&ГТ; выберите пункт действие

---

У меня есть таблица, которая показывает таблицу чуть ниже родительской таблицы , то, что я хочу сделать, это показать или скрыть таблицу "детали" на clic на главной таблице, но я не могу сделать это правильно

Что я уже пробовал:

This is my table structure

<pre lang="HTML"><pre><table class="table table-hover table-mail">
                            <tbody>
                                <tr class="table-tr-header">
                                    <td class="">No Ped</td>
                                    <td class="">Prov</td>
                                    <td class="">Notes</td>
                                    <td class="">Ped Date</td>
                                    <td class="">Delivery Date</td>
                                    <td class="">Department</td>
                                </tr>
                                @foreach (var itemParent in Model.compdg)
                                {
                                <tr class="read invoice-row" data-id="">
                                    <td id="header"  >@itemParent.No_Ped</td>
                                    <td id="header"  >@itemParent.Cod_Prov</td>
                                    <td id="header"  >@itemParent.Notas</td>
                                    <td id="header"  >@itemParent.Fecha_Ped</td>
                                    <td id="header">@itemParent.Fecha_Entrega</td>
                                    <td id="header"  >@itemParent.Cod_Depto</td>
                                </tr>
                                <tr id="details" style="display:none;">
                                    <td colspan="6">
                                        <table >
                                            @foreach (var itemChild in Model.compdl.Where(c => c.No_Ped == itemParent.No_Ped))
                                            {
                                            <tr>
                                                <td >@itemChild.No_Ped</td>
                                                <td >@itemChild.No_Lin</td>
                                                <td >@itemChild.No_Art</td>
                                                <td >@itemChild.Cantidad</td>
                                                <td >@itemChild.Precio</td>
                                                <td >@itemChild.Total</td>
                                            </tr>
                                            }
                                        </table>
                                    </td>
                                </tr>
                                }
                            </tbody>
                        </table>

я положил

style="display:none

на моей детальной таблице, чтобы скрыть его, но мне нужно каждый раз, когда столбец щелкается, показывать его детальную таблицу прямо под ним, таблицы имеют то же значение, что и его " No_Ped"

Это JavaScript, который я реализовал до сих пор, но он скрывает основную таблицу при щелчке мыши, а также не делает невидимой вторую таблицу

<pre>
@section scripts{
    <script type="text/javascript">
        $(function () {
            var last_type = null;
            var filtered = false;
            $("td").on("click", function () {
                console.log("last_type: " + last_type);
                var type = $(this).text();
                console.log("type: " + type);
                if (filtered && last_type == type) {
                    // type is already filtered. Show all.
                    $("tr, td").show();
                    last_type = null; // reset
                    filtered = false; // reset
                } else {
                    $("tr, td").show(); // show all before filtering
                    $('td:first-child').parent('tr:not(:contains(' + type + '))').hide();
                    filtered = true; // set filter flag to true
                }
                last_type = type; // set last type clicked
            });
        });
    </script>
}

что я могу сделать, чтобы таблица деталей всегда скрывалась и просто отображалась при нажатии на главную таблицу?

---