2012-03-05 54 views
0

我似乎無法得到這個權利。我正在尋找合適的jQuery在一個可見和4個隱藏字段上進行數學計算,但爲了使這更容易,我只需要每個字段中的一個。jquery數學重複

我想要輸入一個數字進入輸入'哦',並讓它計算該行'哦'字段的模糊。數學應該是oh - par,結果將顯示在id爲「ord」的範圍內。

我已經嘗試了很多不同的方法,但很好奇專業人士會想出什麼。我可以讓它與一行一起工作,但對下一行不正確。

<form action="orderProcess.php" method="post"> 
    <table id="newOrder" border="0" class="infoTable"> 
    <tr> 
     <th>name</th> 
     <th>par</th> 
     <th>type</th> 
     <th>vendor</th> 
     <th>sort</th> 
     <th>deal</th> 
     <th>Pack</th> 
     <th>OH</th> 
     <th>moq</th> 
     <th>&nbsp;</th> 
     <th>Order</th> 
     </tr> 
    <tbody> 
    <?php do { ?> 
     <tr data-id="<?php echo $row_connList['id']; ?>"> 
     <td><?php echo $row_connList['name']; ?></td> 
     <td><?php echo $row_connList['par']; ?></td> 
     <td><?php echo $row_connList['type']; ?></td> 
     <td><?php echo $row_connList['vendorId']; ?></td> 
     <td><?php echo $row_connList['sortId']; ?></td> 
     <td><?php echo $row_connList['deal']; ?></td> 
     <td><?php echo $row_connList['casePack']; ?></td> 
     <td><input name="par" type="hidden" id="par" value="<?php echo $row_connList['par']; ?>" /> 
      <input name="moq" type="hidden" id="moq" value="<?php echo $row_connList['minOrderQty']; ?>" /> 
      <input name="mot" type="hidden" id="mot" value="<?php echo $row_connList['minOrderType']; ?>" /> 
      <input name="pack" type="hidden" id="pack" value="<?php echo $row_connList['casePack']; ?>" /> 
      <input name="oh" type="text" id="oh" size="6" /> 
     </td> 
     <td><?php echo $row_connList['minOrderQty']; ?></td> 
     <td>&nbsp;</td> 
     <td><span id="ord"></span></td> 
     </tr> 
     <?php } while ($row_connList = mysql_fetch_assoc($connList)); ?> 
     </tbody> 
     <tr> 
     <td><input name="Submit" type="button" value="Submit" /></td> 
     </tr> 
    </table></form> 
+3

第一個問題之前是有效的:你不能有相同的ID不止一次地在一個頁面上。在你的例子中,你將有X個par的數量,moq's,mot's,pack的數量,這取決於行數。如果你有4行,你將得到ID爲par的元素。 – 2012-03-05 19:47:49

回答

0

如上面評論中已經提到的,ID必須是唯一的。 改爲使用類來標識每行中的元素。

<input name="par" class="par" /* snip */ /> 
<input name="moq"class="moq" /* snip */ /> 

最後

<span class="ord"></span> 

由於模糊事件不冒泡,你必須去與單獨的事件偵聽器:

$('#newOrder').find('tbody').find('.oh').bind('blur', function() { 
    var $this = $(this), 
     $parentRow = $this.closest('tr'), 
     // Assuming it's integer values, parseFloat otherwise (without the radix). 
     // || 0 is a fallback value in case the values do not resemble valid ints 
     // you may want to add more sensible validation instead though 
     ohVal = parseInt($this.val(), 10) || 0, 
     parVal = parseInt($parentRow.find('.par').text(), 10) || 0; 

    $parentRow.find('.ord').text(ohVal - parVal); 
}); 
+0

我應該提到,我不介意以任何方式改變代碼 - 我想要最乾淨的可能性。謝謝您的幫助!它以這種方式完美工作 – beaklessChicken 2012-03-05 20:21:37

0

這裏有一個橫向這不需要任何標記更改,儘管使用class ID和ID將會更清晰。

將它留給你來驗證數字做數學

$('[name="oh"]').blur(function(){ 
     var $row=$(this).closest('tr'); 
     var par=$row.find('[name="par"]').val(); 
     $row.find('td:last span').text($(this).val()-par)      
    })​