Question

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

的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，1行（）。
如果我点击 {Some {名}，则在某些名称下方添加1行（）。

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

Add Customer

Answer 1

为表格提供唯一的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();
});

如果您将使用来自数据源的循环并且将有两个以上的表，您可以使用nearest（）或siblings（）函数来选择该表。

// 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>'); 
});

Answer 2

你可以试试这个，

$(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>

Answer 3

有点像这样

<%@ 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>

Answer 4

我为<tfoot>和tr.customer添加了table.cart，并分别在其中放置了按钮。它需要类和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>

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

4 个答案:

段