0

I have a HTML table. In each row, I have a 'Add' button along with a quantity input box, the model #, model description and price. When that button is clicked I have an onclick event which fires off our Analytics Tracking function.

On the click of the add button, I need to get the quantity from the textbox from the same row that the 'ADD' button is clicked. Currently, the only element being returned is the first row of the table. I have tried several methods using .click, .live and .on as well as .closest.

Here is the code, I hope someone can help me as I am lost trying to get this value.

HTML

<table id="ElementCount10">
    <thead>
        <tbody>
            <tr class="odd">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
                </td>
                <td class="model sorting_1">
                    <a class="sku" href="#">Sample Part</a>
                </td>
                <td class="descript" rowspan="1" colspan="1">Part Description</td>
                <td class="avail"><span class="instock">In Stock</span></td>
                <td class="price">$318.00</td>
                <td class="cart">
                    <input type="hidden" name="labelid" value="1234567">
                    <input type="hidden" name="productid" value="Part Number">
                    <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                    <a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">
                </td>
            </tr>
            <tr class="even">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
               </td>
               <td class="model sorting_1"><a class="sku" href="#">Part Number</a></td>
               <td class="descript" rowspan="1" colspan="1">Part Description</td>
               <td class="avail"><span class="instock">In Stock</span></td>
               <td class="price">$371.00</td>
               <td class="cart">
                   <input type="hidden" name="labelid" value="1234567">
                   <input type="hidden" name="productid" value="Part Number">
                   <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                   <a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">
               </td>
          </tr>

JS

function SiteCatalystSingleTracking(carttype, requiredamt, $this, thisTarget) { // $this is the actual table to process
    var parts = '';
    var node = "";
    var parent_path = '';
    alert("T:" + thisTarget);
    thisNewTarget = $(thisTarget).parents("td.cart").children("input[name=quantity]").val();
    alert("NT: " + thisNewTarget);
    parent_path = $($this).parents("table").attr("id");
    var sku = $("#" + parent_path + " tbody tr .cart").children("input[name=productid]").val();
    var qty = $("#" + parent_path + " tbody tr .cart").children("input[name=quantity]").val();
    var labelid = $("#" + parent_path + " tbody tr .cart").children("input[name=labelid]").val();
 }

I really need some help on this. Anything would be great!

-HeatherBear

4

4 回答 4

1

首先，我认识的大多数人都使用 jQuery 快门直接在 HTML 中查看附加到 DOM 元素的事件，就像您在这里所做的那样：

<a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">

我强烈建议不要这样做。

我推荐的是这样的：

<table id="ElementCount10">
    <thead>
        <tbody>
            <tr class="odd">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
                </td>
                <td class="model sorting_1">
                    <a class="sku" href="#">Sample Part</a>
                </td>
                <td class="descript" rowspan="1" colspan="1">Part Description</td>
                <td class="avail"><span class="instock">In Stock</span></td>
                <td class="price">$318.00</td>
                <td class="cart">
                    <input type="hidden" name="labelid" value="1234567">
                    <input type="hidden" name="productid" value="Part Number">
                    <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                    <input type="button" value="Add" />
                </td>
            </tr>
            <tr class="even">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
               </td>
               <td class="model sorting_1"><a class="sku" href="#">Part Number</a></td>
               <td class="descript" rowspan="1" colspan="1">Part Description</td>
               <td class="avail"><span class="instock">In Stock</span></td>
               <td class="price">$371.00</td>
               <td class="cart">
                   <input type="hidden" name="labelid" value="1234567">
                   <input type="hidden" name="productid" value="Part Number">
                   <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                   <input type="button" value="Add" />
               </td>
          </tr>

然后，在 JavaScript 中，我会做类似的事情

<script>
  $().ready(function() {
    $('#ElementCount10').on('input:button','click',function(evt) {
      var quantity = $(this).closest('tr').find('input.qty)'.val();
      // Do you stuff with the value
    });
  });
</script>
于 2013-09-11T20:13:18.507 回答
1 
$($this).closest("tr").find("input[name=quantity]").val();

$this尽管当参数不是 jquery 对象而是 DOM 元素时，您真的不应该命名参数。这真的很令人困惑。

于 2013-09-11T20:10:37.500 回答
0

用于prev()获取以前的输入，如下所示：

$(document).ready(function(){
        $(".btn-primary").click(function(){
        alert($(this).prev('input[type=text].qs').val);
        });
    });
于 2013-09-11T20:21:16.230 回答
0 
<script>
$(document).ready(function(){
    $(".btn-primary").click(function(){
        qty = $(this).parents('.cart').find('.qty').val();
        alert(qty);
    });
});
</script>
于 2013-09-11T20:08:56.633 回答