javascript - 解析当前页面的网页提交按钮

Question

来自以下网页代码:

(现在不要通读它 - 只需跳过它并看看我需要从以下代码中获取什么内容，然后您就可以返回到此代码。)

<table class="shop_table cart" cellspacing="0">
  <thead>
    <tr>
      <th class="product-remove">&nbsp;</th>
      <th class="product-thumbnail">&nbsp;</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>

    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=02e74f10e0327ad868d138f2b4fdd6f0&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a>	
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/5-htp-power/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2806-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2806" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/5-htp-power/">5-HTP Power</a>	
      </td>

      <td class="product-price">
        <span class="amount">&#36;19.55</span>	
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[02e74f10e0327ad868d138f2b4fdd6f0][qty]" value="35" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;97.75</span>	
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=6ea9ab1baa0efb9e19094440c317e21b&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a>	
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/5-w/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1120-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1120" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/5-w/">5-W</a>	
      </td>

      <td class="product-price">
        <span class="amount">&#36;19.35</span>	
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[6ea9ab1baa0efb9e19094440c317e21b][qty]" value="104" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;77.40</span>	
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=c16a5320fa475530d9583c34fd356ef5&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a>	
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/7-keto/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2922-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2922" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/7-keto/">7-Keto</a>	
      </td>

      <td class="product-price">
        <span class="amount">&#36;38.25</span>	
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[c16a5320fa475530d9583c34fd356ef5][qty]" value="3" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;114.75</span>	
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=182be0c5cdcd5072bb1864cdee4d3d6e&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a>	
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/acidophilus/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1666-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1666" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/acidophilus/">Acidophilus</a>	
      </td>

      <td class="product-price">
        <span class="amount">&#36;15.95</span>	
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[182be0c5cdcd5072bb1864cdee4d3d6e][qty]" value="22" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;31.90</span>	
      </td>
    </tr>
    <tr>
      <td colspan="6" class="actions">

        <div class="coupon">

          <label for="coupon_code">Coupon:</label>
          <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" />
          <input type="submit" class="button" name="apply_coupon" value="Apply Coupon" />


        </div>

我需要捕获以下项目:

alt="2806"的 2806 部分

value="35"title="Qty"的35部分

alt="1120"的 1120 部分

value="104"title="Qty"的 104 部分

alt="2922"的 2922 部分

value="3"title="Qty"的第3部分

alt="1666"的 1666 部分

value="22"title="Qty"的22部分

我看过这个页面:

Javascript: How to loop through ALL DOM elements on a page?

以及此页面:

http://www.w3schools.com/js/js_htmldom_nodelist.asp

我有点不知所措。

我需要的是一些 javascript 代码，它将导致......一个包含以下内容的变量:

<input type="hidden" name="prodnum" value="2806" />
<input type="hidden" name="prodqty" value="35" />
<input type="hidden" name="prodnum" value="1120" />
<input type="hidden" name="prodqty" value="104" />
<input type="hidden" name="prodnum" value="2922" />
<input type="hidden" name="prodqty" value="3" />
<input type="hidden" name="prodnum" value="1666" />
<input type="hidden" name="prodqty" value="22" />

我将继续努力解决这个问题，看看我是否能自己解决这个问题，但可能性对我不利。

感谢您提供的任何帮助!

Answer 1

您可以使用三维 javascript 对象来做到这一点:

jsFiddle Demo

var stObj = {};
$('#mybutt').click(function(){
    var cnt = 0;
    $('.shop_table tbody tr:not(:last-child)').each(function(){
        //alert( this.className );
        cnt++;
        stObj[cnt] = {};
        $this = $(this);
        var thImg = $this.find('.product-thumbnail a img').attr('alt');
        //alert(thImg);
        var prQty = $this.find('.product-quantity div input').val();
        //alert(prQty);
        stObj[cnt]['thImg'] = thImg;
        stObj[cnt]['prQty'] = prQty;
    });
    alert( JSON.stringify(stObj) );
});

注释:

(1) 对象 stObj 是全局定义的(即在使用它的函数之外 - 上面 - )

(2) jQuery 选择器 tr:not(:last-child) 防止尝试在最后一个表行中查找 alt 和 value

(3) 在 jsFiddle 中，#tst div 立即被代码隐藏。如果可见，它只是表明代码已损坏，而无需按任何按钮。

引用文献:

Multi-dimensional associative arrays in javascript

javascript or jquery: Looping a multidimensional object