堆栈内存溢出
  简体   繁体   English

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

[英]How to select a specific element with nested table in html using jquery

 原文  2016-11-04 12:45:25  7   4    javascript/ jquery/ html/ this

问题描述

I have searched and tried some jquery selectors (eg :last) but I couldn't figure out which selector should I use. 我搜索并尝试了一些jquery选择器（例如：last）但我无法弄清楚我应该使用哪个选择器。 Should I use this also? 我应该用this也？ The problem is, I want to add a row inside of nested <table> , and if I click add button, the only specific <table> can add a row inside it. 问题是，我想在嵌套的<table>添加row ，如果单击“添加”按钮，则唯一的特定<table>可以在其中添加row 。
Here's my example code: 这是我的示例代码：

index.html ========================================================================= 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>
  • If I clicked the Add Item , 1 row() added below the Yamaha Item. 如果我单击 Add Item ，则在Yamaha项目下方Add Item 1行（）。
  • If I clicked the Add Customer , 1 row() added below the Some Name. 如果我单击 Add Customer ，则在Some Name下面Add Customer 1行（）。



myJS.js code: ========================================================================= 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();
});

4 个解决方案

解决方案1
 0  2016-11-04 12:55:12

Give your tables unique ids. 为表提供唯一的ID。

For example: 例如： 

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

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

If you will use a loop from a data source and there will be more than two tables, you can use closest() or siblings() function to select that tables. 如果您将使用来自数据源的循环并且将有两个以上的表，则可以使用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>'); 
});

解决方案2
 0  2016-11-04 12:58:43

You can try this, 你可以试试这个， 

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

解决方案3
 0  2016-11-04 13:00:42

Some thing like this 有点像这样 

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

解决方案4
 0 已采纳  2016-11-04 15:03:02

I added <tfoot> for the tr.customer and table.cart and placed the buttons therein respectively. 我为tr.customer和table.cart添加了<tfoot>并分别在其中放置了按钮。 It needed classes and ids to make a complex task much easier. 它需要类和ID来使复杂的任务更容易。

SNIPPET SNIPPET 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用Jquery在HTML表格的点击表格行中选择元素？ - How to select a element in the clicked table row of a HTML table using Jquery? jQuery - 选择具有特定html的元素 - jQuery - Select element with specific html 如何使用Jquery选择特定的嵌套元素 - How can I select specific nested element with Jquery 如何使用 JQuery 选择特定的 HTML 片段？ - How to Select Specific Piece of HTML using JQuery? 如何在没有ID和类的jQuery中选择表中的嵌套元素 - How to select a nested element in a table with jquery with no ID and classes 如何使用jQuery获取html select元素的特定值 - How to get specific value of html select element with jQuery 如何在Jquery中选择html元素的特定实例？ - How do I select a specific instance of an html element in Jquery? 无法使用jQuery在HTML表中添加选择元素 - unable to add select element in html table using jquery 使用jQuery在HTML表格中选择输入元素的值 - select value of input element inside html table using jquery 如何使用JS / jQuery在HTML表中选择一个特定的单元格？ - How to select one specific cell inside an HTML table using JS/jQuery?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM