返回数据表输入字段

如何

返回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
}

提前谢谢你！

您可以访问textbox value为

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

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

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

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

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

相关内容

最新更新

热门标签：