显示/隐藏< td>在其他< td>点击动作 [英] Show / hide <td> upon other <td> click action

问题描述

我有一个表显示父表下方的表，我想要做的是在主表上显示或隐藏clic上的details表但我无法正确执行



我尝试了什么：

I got a Table that shows a table just below the parent table , what i want to do is show or hide the "details" table upon clic on the main table but im not able to do it correctly

What I have tried:

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>

i将

i put a

style="display:none

在我的详细信息表上隐藏它但我需要每次点击一列显示其下方的详细信息表，表格具有与其No_Ped相同的值



这是我到目前为止实现的JavaScript，但它在点击时隐藏主表，也不会使第二个表隐形

on my detail table to hide it but i need to each time a column is clicked show its detailt table just below it , tables have a same value that its "No_Ped"

This is the JavaScript i have implemented so far but it hides the main table upon click and also dont make invisible the second table

<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>
}

我能做些什么才能让细节表始终隐藏，只需点击主表即可显示？

what can i do to make details table always hide, and just show upon click on main table?

推荐答案

（ function （）{
var last_type = null ;
var filtered = false ;

(function () { var last_type = null; var filtered = false;

（ td）。on（ 点击， function （）{
console .log（ last_type： + last_type）;
var type =

("td").on("click", function () { console.log("last_type: " + last_type); var type =

（ this ）。text（）;
console .log（ type： +类型）;
如果（已过滤&&< last_type == type）{
// 类型已经过滤。全部显示。

(this).text(); console.log("type: " + type); if (filtered && last_type == type) { // type is already filtered. Show all.

这篇关于显示/隐藏&lt; td&gt;在其他&lt; td&gt;点击动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！