带有嵌套元素的单击选择按钮上的jQuery

Question

这是我的HTML。单击此按钮并更改i类时，我想显示我的表格行。但是，我似乎无法选择内部元素。

<button type="button" class="btn-outline-warning">
    <i class="fa fa-plus"></i>
</button>  



<script>
    $("body").on("click", "button > i.fa-plus", function () {
                    $(this).closest("tr").after("<tr id='row'><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");            
                    $(this).attr("class", "fa fa-minus");
                    $('#row').hide(); 
                    $('#row').fadeIn();
                });
</script>

这是完整的代码，它是一个嵌套表

 <table class="table table-striped text-center" style="width:100%;">
                <thead>
                    <tr>
                        <th></th>
                        <th>@Html.DisplayNameFor(model => Model.Matrizes[0].UAP)</th>
                        <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Celula.Nome)</th>
                        <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Referencia.Nome)</th>
                        <th>@Html.DisplayNameFor(model => Model.Matrizes[0].ObjectivoHora)</th>
                        <th>@Html.DisplayNameFor(model => Model.Matrizes[0].CelulaTipo.Nome)</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Matrizes)
                    {
                        <tr>
                            <td>
                                @if (item.Geometrias != null)
                                {
                                <button type="button" class="btn-outline-warning">
                                    <i class="fa fa-plus"></i>
                                </button>
                                    <div id="tblGeometrias"  style="display:none">
                                        <table class="table table-striped" cellpadding="0" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Geometrias.SingleOrDefault().Id)</th>
                                                    <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Geometrias.SingleOrDefault().Componente)</th>
                                                    <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Geometrias.SingleOrDefault().ToleranciaInferior)</th>
                                                    <th>@Html.DisplayNameFor(model => Model.Matrizes[0].Geometrias.SingleOrDefault().ToleranciaSuperior)</th>
                                                    <th></th>                                 
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var geometria in item.Geometrias)
                                                {
                                                    <tr>
                                                        <td>@Html.DisplayFor(modelItem => geometria.Id)</td>
                                                        <td>@Html.DisplayFor(modelItem => geometria.Componente)</td>
                                                        <td>@Html.DisplayFor(modelItem => geometria.ToleranciaInferior)</td>
                                                        <td>@Html.DisplayFor(modelItem => geometria.ToleranciaSuperior)</td>
                                                        <td>
                                                            <a asp-page="./Geometrias/Edit" asp-route-id="@geometria.Id" class="btn btn-secondary btn-sm"><i class="fa fa-edit"></i> Editar</a>                                                            
                                                            <a asp-page="./Geometrias/Delete" asp-route-id="@geometria.Id" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Eliminar</a>
                                                        </td>                                                   
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                }
                            </td>
                            <td>@Html.DisplayFor(modelItem => item.UAP.Nome)</td>
                            <td>@Html.DisplayFor(modelItem => item.Celula.Nome)</td>
                            <td>@Html.DisplayFor(modelItem => item.Referencia.Nome)</td>
                            <td>@Html.DisplayFor(modelItem => item.ObjectivoHora)</td>
                            <td>@Html.DisplayFor(modelItem => item.CelulaTipo.Nome)</td>
                            <td>

                                <a asp-page="./Edit" asp-route-id="@item.Id" class="btn btn-secondary btn-sm"><i class="fa fa-edit"></i> Editar</a>
                                <a asp-page="./Geometrias/Create" asp-route-id="@item.Id" class="btn btn-dark btn-sm"> X-R</a>
                                <a asp-page="./Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Eliminar</a>

                            </td>
                        </tr>
                    }
                </tbody>
            </table>

我已经更新了答案，这是一个asp.net核心应用程序

这只是一些嵌套表，我正在尝试用jquery显示嵌套表

Answer 1

$(this).next().html()

此行将不返回任何内容。在点击处理程序的上下文中，this是<i>，没有兄弟姐妹。使用按钮应遵循以下条件。

$(this).closest('button').next().html()
//or
$(this).parent().next().html()

Answer 2

您可以尝试以下操作（代码中解释更改的注释）

$("body").on("click", "button > i.fa-plus,button > i.fa-minus", function() { // might as well bind to both or change selector to button > i.fa (if your icon has fa as that class doesn't change)
  var $icon = $(this); // the clicked icon

  if ($icon.hasClass('fa-plus')) { // if plus icon pressed
    var $newRow = $("<tr class='row-added'><td></td><td colspan = '999'>" + $icon.next().html() + "</td></tr>"); // create new row with a class instead of id (ids should be unique and this can be added multiple times)

    $icon.closest("tr").after($newRow.hide()); // add your new row hidden

    $newRow.fadeIn(); // fadeIn the new row
  } else { // if minus icon pressed
    $icon.closest("tr").next('.row-added').remove(); // remove next row (if it was added)
  }

  $icon.toggleClass("fa-minus fa-plus"); // change the icon

});

.fa-plus:before {
  content: '+';
  display:inline-block;
}

.fa-minus:before {
  content: '-';
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan = '1000'><button><i class="fa fa-plus"></i><span>test</span></button></td>
  </tr>
</table>

或将事件绑定到按钮：

$("body").on("click", "button", function() { 
  var $icon = $(this).find('i.fa'); // the clicked icon

  if ($icon.hasClass('fa-plus')) { // if plus icon pressed
    var $newRow = $("<tr class='row-added'><td></td><td colspan = '999'>" + $icon.next().html() + "</td></tr>"); // create new row with a class instead of id (ids should be unique and this can be added multiple times)

    $icon.closest("tr").after($newRow.hide()); // add your new row hidden

    $newRow.fadeIn(); // fadeIn the new row
  } else { // if minus icon pressed
    $icon.closest("tr").next('.row-added').remove(); // remove next row (if it was added)
  }

  $icon.toggleClass("fa-minus fa-plus"); // change the icon

});

.fa-plus:before {
  content: '+';
  display:inline-block;
}

.fa-minus:before {
  content: '-';
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan = '1000'><button><i class="fa fa-plus"></i><span>test</span></button></td>
  </tr>
</table>

Answer 3

我的建议是：

$("body").on("click", "button > i.fa-plus", function () {
    var tr = $(this).closest("tr");
    tr.after("<tr class='row'><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
    $(this).toggleClass("fa-plus fa-minus");
    tr.next('.row').fadeIn();
});
$("body").on("click", "button > i.fa-minus", function () {
    $(this).closest("tr").next('.row').remove();
    $(this).toggleClass("fa-plus fa-minus");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >


<button type="button" class="btn-outline-warning">
    <i class="fa fa-plus"></i>
</button>
<table class="table table-striped text-center" style="width:100%;">
    <thead>
    <tr>
        <th></th>
        <th>UAP</th>
        <th>Celula.Nome</th>
        <th>Referencia.Nome</th>
        <th>ObjectivoHora</th>
        <th>CelulaTipo.Nome</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <button type="button" class="btn-outline-warning">
                <i class="fa fa-plus"></i>
            </button>
            <div id="tblGeometrias"  style="display:none">
                <table class="table table-striped" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Componente</th>
                        <th>ToleranciaInferior</th>
                        <th>ToleranciaSuperior</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>geometria.Id</td>
                        <td>Componente</td>
                        <td>ToleranciaInferior</td>
                        <td>ToleranciaSuperior</td>
                        <td>
                            <a href="./Geometrias/Edit" class="btn btn-secondary btn-sm"><i class="fa fa-edit"></i> Editar</a>
                            <a href="./Geometrias/Delete" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Eliminar</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </td>
        <td>UAP.Nome</td>
        <td>Celula.Nome</td>
        <td>Referencia.Nome</td>
        <td>ObjectivoHora</td>
        <td>CelulaTipo.Nome</td>
        <td>
            <a href="./Edit" class="btn btn-secondary btn-sm"><i class="fa fa-edit"></i> Editar</a>
            <a href="./Geometrias/Create" class="btn btn-dark btn-sm"> X-R</a>
            <a href="./Delete" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Eliminar</a>
        </td>
    </tr>
    </tbody>
</table>

Answer 4

我以内部元素来假设您的意思是（i class =“ fa fa-plus”） 首先，我不会将body用作选择器，建议使选择尽可能具体。

可以使用按钮，tr或至少使用Table进行选择。

$("button").on("click", function() {
                $(this).closest("tr").after("<tr id='row'><td></td><td colspan = '999'>" + 
                $(this).next().html() + "</td></tr>");            
                $(this).attr("class", "fa fa-minus");
                $('#row').fadeIn();
});

如果用inside元素表示tr内的元素，则发布完整的html，以便我检查问题出在哪里。

此外，我建议在单击事件之前隐藏一些位置，以便单击fa-plus只会淡入，而如果您具有fa-min则将淡出或隐藏。

希望有帮助