如何计算下拉列表的总量?

时间:2013-02-22 23:32:40

标签: javascript html css html-select

我是一名平面设计师而非程序员 但我按照一些教程为在线表格网页制作了佣金

我想知道如何计算此表中的价格(分销商的总数和公众的第二总数)>。>我知道这很复杂。

我试图将cwolves答案添加到代码页中..但它与我的提交按钮冲突..如果没有按钮,它会自动出现..出现在表格下方的某处?

您可以在此处查看此表:http://jsfiddle.net/87JpK/

<table border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="125" height="30"><div align="left"><em3>&nbsp;Product's Name</em3></div></td>
    <td width="85"><div align="left"><em3>Volume ml</em3></div></td>
    <td width="110"><div align="left"><em3>Distributor</em3></div></td>
    <td width="110"><div align="left"><em3>Public</em3></div></td>
    <td width="200"><div align="left"><em3>Quantity (1 Pack=10 Units)</em3></div></td>
  </tr>
  <tr>
    <td height="30"><label for="face_cream">&nbsp;&nbsp;<em4>Face Cream</em4></label></td>
    <td>120</td>
    <td>&nbsp;21.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td>&nbsp;35.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td><select name="face_cream" id="face_cream">
      <option value="0 Pack" selected="selected">Choose your quantity...</option>
      <option value="1 Pack">1 Pack</option>
      <option value="2 Packs">2 Packs</option>
      <option value="3 Packs">3 Packs</option>
      ...
      <option value="99 Packs">99 Packs</option>
      <option value="100 Packs">100 Packs</option>
      </select></td>
  </tr>
  <tr>
    <td height="30"><label for="body_cream">&nbsp;&nbsp;<em4>Body Cream</em4></label></td>
    <td>250</td>
    <td>&nbsp;36.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td>&nbsp;59.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td><select name="body_cream" id="body_cream">
      <option value="0 Pack" selected="selected">Choose your quantity...</option>
      <option value="1 Pack">1 Pack</option>
      <option value="2 Packs">2 Packs</option>
      <option value="3 Packs">3 Packs</option>
      ...
      <option value="99 Packs">99 Packs</option>
      <option value="100 Packs">100 Packs</option>
      </select>
    </td>
  </tr>
  <tr>
    <td height="30"><label for="body_oil">&nbsp;&nbsp;<em4>Body Oil</em4></label></td>
    <td>100</td>
    <td>&nbsp;31.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td>&nbsp;53.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td><select name="body_oil" id="body_oil">
      <option value="0 Pack" selected="selected">Choose your quantity...</option>
      <option value="1 Pack">1 Pack</option>
      <option value="2 Packs">2 Packs</option>
      <option value="3 Packs">3 Packs</option>
      ...
      <option value="99 Packs">99 Packs</option>
      <option value="100 Packs">100 Packs</option>
      </select></td>
  </tr>
  <tr>
    <td height="30"><label for="face_wash">&nbsp;&nbsp;<em4>Face Wash</em4></label></td>
    <td>200</td>
    <td>&nbsp;26.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td>&nbsp;39.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td><select name="face_wash" id="face_wash">
      <option value="0 Pack" selected="selected">Choose your quantity...</option>
      <option value="1 Pack">1 Pack</option>
      <option value="2 Packs">2 Packs</option>
      <option value="3 Packs">3 Packs</option>
     ...
      <option value="99 Packs">99 Packs</option>
      <option value="100 Packs">100 Packs</option>
      </select></td>
  </tr>
  <tr>
    <td height="30"><label for="breast_oil">&nbsp;&nbsp;<em4>Breast Oil</em4></label></td>
    <td>100</td>
    <td>&nbsp;30.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td>&nbsp;49.00&nbsp;&nbsp;<em2>(CHF)</em2></td>
    <td><select name="breast_oil" id="breast_oil">
      <option value="0 Pack" selected="selected">Choose your quantity...</option>
      <option value="1 Pack">1 Pack</option>
      <option value="2 Packs">2 Packs</option>
      <option value="3 Packs">3 Packs</option>
     ...
      <option value="99 Packs">99 Packs</option>
      <option value="100 Packs">100 Packs</option>
      </select></td>
  </tr>

</table>

提前致谢

1 个答案:

答案 0 :(得分:1)

呃,为什么不呢。使用jQuery:

eval( $( 'td:nth-child(3)' ).map( function( td, $this ){
    return ( ( parseFloat( ( $this = $( this ) ).text() ) || 0 )
        * ( parseFloat( $this.parent().find( 'select' ).val() ) || 0 ) );
} ).get().join( '+' ) )

演示:

http://jsfiddle.net/W8yK8/

nth-child(3)更改为4以获取公共价格

(对于任何想批评我的人来说,这与问题本身的质量相同)