Question

如何在jquery数据表中返回输入值？这是我的表：

<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Product Code</th>
            <th>Brand</th>
            <th>Category</th>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {{#each context}}
        <tr>
            <td class="product_code">{{product_code}}</td>
            <td class="brand">{{brand}}</td>
            <td class="category">{{category}}</td>
            <td class="description">{{description}}</td>
            <td class="price">$ {{invoice_price}}</td>
            <td class="quantity"><input type="text"></td> //WANT TO RETURN THIS
            <th><a href="/product/{{product_code}}">Details</a></th>
            <th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>
        </tr>
        {{/each}}
    </tbody>
</table>

我特别希望通过点击也是该行一部分的按钮来返回此输入中的值：

<td class="quantity"><input type="text"></td>

到目前为止，我试过了：

$(".btn-btn-info").click(function() {
    var quantity: $(this).parent().parent().children('td.quantity').val();
    console.log(quantity) // returns undefined
}

提前谢谢！

Answer 1

您可以访问textbox value作为

var quantity = $(this).parents("tr:first").find('.quantity input').val();

Answer 2

您使用的是错误的班级，没有任何类名为btn-btn-info

＆＃13;

$("button.btn").click(function(){
 
  console.log( $(this).parent().parent().find('input').val() );
   // console.log(quantity) // returns undefined
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Product Code</th>
            <th>Brand</th>
            <th>Category</th>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
      
        <tr>
            <td class="product_code">{{product_code}}</td>
            <td class="brand">{{brand}}</td>
            <td class="category">{{category}}</td>
            <td class="description">{{description}}</td>
            <td class="price">$ {{invoice_price}}</td>
            <td class="quantity"><input type="text" value="hello world"></td> //WANT TO RETURN THIS
            <th><a href="/product/{{product_code}}">Details</a></th>
            <td><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></td>
        </tr>
       
    </tbody>
</table>

＆＃13;

Answer 3

    <html>
<head>
    <title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {


        szTr = '<tr><td class="product_code">product_code</td>';
           szTr=szTr+'<td class="brand">brand</td>';
           szTr=szTr+'<td class="category">category</td>';
           szTr=szTr+'<td class="description">description</td>';
           szTr=szTr+'<td class="price">$ invoice_price</td>';
           szTr=szTr+'<td class="quantity"><input type="text" value="222222"></td>';
           szTr=szTr+'<th><a href="/product/product_code">Details</a></th>';
           szTr=szTr+'<th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>';
           szTr = szTr + '</tr>';
           $('#productsTable tbody').append(szTr)


           $('#productsTable').on('click', '.btn-info', function () {
               alert($(this).closest('tr').find('td.quantity').find('input').val());               
           });




        });


</script>
</head>
<body>

    <table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Product Code</th>
            <th>Brand</th>
            <th>Category</th>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

返回数据表输入字段

3 个答案: