如何使用jquery在html中选择具有嵌套表的特定元素答案

【问题标题】：How to select a specific element with nested table in html using jquery如何使用jquery在html中选择具有嵌套表的特定元素
【发布时间】：2016-11-04 12:45:25
【问题描述】：

我已经搜索并尝试了一些 jquery 选择器（例如 :last），但我不知道应该使用哪个选择器。我也应该使用this 吗？问题是，我想在嵌套的<table> 中添加一个row，如果我单击添加按钮，唯一特定的<table> 可以在其中添加一个row。
这是我的示例代码：

index.html ==================================================== ========================

<table>
    <thead>
        <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Address</th>
           <th>Gender</th>
           <th>My Items</th>
        </tr>
    </thead>
    <tbody>
       <tr>
          <td>Some Name</td>
          <td>30</td>
          <td>My Address</td>
          <td>Male</td>
          <td>
             <table>
                <thead>
                  <tr>
                     <th>Brand</th>
                     <th>Quantity</th>
                     <th>Size</th>
                     <th>Color</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                     <td>Yamaha</td>
                     <td>30</td>
                     <td>Large</td>
                     <td>Black</td>
                  </tr>
                </tbody>
             </table>
             <button id="AddItem">Add Item</button>
          </td>
       </tr>
    </tbody>
</table>
<button id="AddCustomer">Add Customer</button>

如果我单击Add Item，则在 Yamaha 项目下方添加 1 row()。
如果我单击Add Customer，则会在Some Name 下方添加1 row()。

myJS.js 代码： ==================================================== ========================

$("#addItem").on('click', function(e) {
    $('tr:last').after("Added Row for Items.");
    e.preventDefault();
});
<br>

$("#addCustomer").on('click', function(e) {
    $('tr:last').after("Added Row for Customer.");
    e.preventDefault();
});

【问题讨论】：

当您单击 Add Custome 时，应在包含某个名称的某行之后添加 1 行；？

标签： javascript jquery html this

【解决方案1】：

我为tr.customer 和table.cart 添加了<tfoot>，并将按钮分别放在其中。它需要类和 ID 来简化复杂的任务。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>PO</title>

  <style>
    table,
    td,
    th {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <header>
    <form id="panel">

    </form>
  </header>
  <section id="I">


    <table id='PO1' class="purchaseOrder">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Gender</th>
          <th>Cart</th>
        </tr>
      </thead>
      <tbody>
        <tr id='C1' class='customer'>
          <td>Some Name</td>
          <td>30</td>
          <td>My Address</td>
          <td>Male</td>
          <td>
            <table class='cart'>
              <thead>
                <tr>
                  <th>Brand</th>
                  <th>Quantity</th>
                  <th>Size</th>
                  <th>Color</th>
                </tr>
              </thead>
              <tbody>
                <tr id='item1' class='item'>
                  <td>Yamaha</td>
                  <td>30</td>
                  <td>Large</td>
                  <td>Black</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan='3'></td>
                  <td>
                    <button class="addItem">Add Item</button>
                  </td>
                </tr>
              </tfoot>
            </table>

          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan='3'></td>
          <td>
            <button class="addCustomer">Add Customer</button>
          </td>
        </tr>
      </tfoot>
    </table>


  </section>
  <footer>&nbsp;</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script>
    $(".addItem").on('click', function(e) {
      $(this).closest('table').find(".item:last").after('<tr class="item"><td>New item</td><td></td><td></td><td></td></tr>');
    });


    $(".addCustomer").on('click', function(e) {
      var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
      var newCart = $('.cart:first').clone(true, true).wrap('td');
      newCart.find('tbody').html("").html('<tr class="item"><td>New Item</td><td></td><td></td><td></td></tr>');
      $('.customer:last').append(newCart);
      e.preventDefault();
    });
  </script>
</body>

</html>

【讨论】：

太好了，很高兴能帮上忙，别忘了检查绿色✔。
@zer00ne 老兄，我怎样才能选择子表中的每一行，以便我可以在每一行中放置delete button？
内表意味着购物车？看看Add Item 左边的那个空间。这是一个<td>，但它是正常宽度的 3 倍。 <td> 有一个属性 colspan='3'。制作colspan="2"，然后添加一个新的<td><button id='del>Remove Item</button></td>
提出另一个问题，我会尝试用完整的代码来回答。
我的意思是，添加一个删除功能，这样如果我点击delete button，只会删除它的行。

【解决方案2】：

为您的表格指定唯一 ID。

例如：

<table id="customerTable"></table>
<table id="productTable"></table>

$("#addCustomer").on('click', function(e) {
    $('#customerTable > tbody').append('<tr><td>New row</td></tr>');
    e.preventDefault();
});

如果您将使用来自数据源的循环并且有两个以上的表，您可以使用最接近的() 或兄弟() 函数来选择这些表。

// note, use class instead of using id if there will be multiple buttons.
$('.addCustomer').on('click', function() {
    // test if you get the correct table
    var table = $(this).closest('table');
    console.log(table);

    // if above not work try;
    var table = $(this).siblings('table');
    console.log(table);

    // if you successfully get the table you wanted,
    table.find('tbody').append('<tr><td>New customer row</tr>'); 
});

【讨论】：

【解决方案3】：

你可以试试这个，

$(document).ready(function () {
$("#AddItem").on('click', function(e) {
    $(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Item</td></tr>')
    e.preventDefault();
});

$("#AddCustomer").on('click', function(e) {
  $(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Customer</td></tr>')
    e.preventDefault();
});
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Address</th>
           <th>Gender</th>
           <th>My Items</th>
        </tr>
    </thead>
    <tbody>
       <tr>
          <td>Some Name</td>
          <td>30</td>
          <td>My Address</td>
          <td>Male</td>
          <td>
             <table>
                <thead>
                  <tr>
                     <th>Brand</th>
                     <th>Quantity</th>
                     <th>Size</th>
                     <th>Color</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                     <td>Yamaha</td>
                     <td>30</td>
                     <td>Large</td>
                     <td>Black</td>
                  </tr>
                </tbody>
             </table>
             <button id="AddItem">Add Item</button>
          </td>
       </tr>
    </tbody>
</table>
<button id="AddCustomer">Add Customer</button>

【讨论】：

请点击this link回答我与此问题相关的其他问题。

【解决方案4】：

类似的东西

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StackOverflow_Solve.jQueryAjax.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.12.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script>

        $(function () {
            //  $('#myModal').show();
            $('#AddItem').click(function(e) {
                e.preventDefault();
                var childtable = $(this).closest('tr').find('.childtable');
                console.log(childtable);
                var mytr = '<tr><td>Yamaha</td><td>1</td><td>Large</td><td>Black</td><td> <button id="remove" class="remove">remove Customer</button></td></tr>';
                $('#childtable > tbody:last').append(mytr);

            });
            $(document).on('focus', '.remove', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
<table class="table table-bordered">
    <thead>
        <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Address</th>
           <th>Gender</th>
           <th>My Items</th>
        </tr>
    </thead>
    <tbody>
       <tr>
          <td>Some Name</td>
          <td>30</td>
          <td>My Address</td>
          <td>Male</td>
          <td>
             <table id="childtable" class="childtable">
                <thead>
                  <tr>
                     <th>Brand</th>
                     <th>Quantity</th>
                     <th>Size</th>
                     <th>Color</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                     <td>Yamaha</td>
                     <td>30</td>
                     <td>Large</td>
                     <td>Black</td>
                     <td>
                         <button id="remove" class="remove">remove Customer</button>
                     </td>
                  </tr>
                </tbody>
             </table>
             <button id="AddItem">Add Item</button>
          </td>
       </tr>
    </tbody>
</table>
<button id="AddCustomer">Add Customer</button>

    </form>
</body>
</html>

【讨论】：