表格中的jQuery表格

我已經創建了一個表格，它根據某些選定的標準計算價格，作爲一個獨立的程序，它工作的很好，不幸的是，由於某些原因，我將代碼放入單獨的單元格後，桌子，我能知道最終結果的唯一方法是，當我刷新我的瀏覽器.....任何想法如何解決這個問題，請參見下面的代碼：表格中的jQuery表格

採取<td> & </td>出來，它工作正常

<!DOCTYPE html> 
<head> 
<TITLE>test</TITLE> 
<script src="javascript/jquery-2.0.0b1.js"></script> 
<link rel="stylesheet" href="css/domain-name-price-guide-table.css" /> 
</head> 
<body> 
<div class="datagrid"> 
<form id="buy"> 
<table> 
<thead> 
</thead> 
<tbody> 
<tr> 
<td> 
    <select name="years"> 
     <option value="4.49">1 Year</option> 
     <option value="6.49">2 Years</option> 
     <option value="9.47">3 Years</option> 
     <option value="12.47">4 Years</option> 
     <option value="15.45">5 Years</option> 
     <option value="18.44">6 Years</option> 
     <option value="21.43">7 Years</option> 
     <option value="24.42">8 Years</option> 
     <option value="27.41">9 Years</option> 
     <option value="30.40">10 Years</option> 
    </select> 
</td> 
<td> 
    <select name="names"> 
     <option value="1">1 domain name</option> 
     <option value="2">2 domain names</option> 
     <option value="3">3 domain names</option> 
     <option value="4">4 domain names</option> 
     <option value="5">5 domain names</option> 
     <option value="6">6 domain names</option> 
     <option value="7">7 domain names</option> 
     <option value="8">8 domain names</option> 
     <option value="9">9 domain names</option> 
     <option value="10">10 domain names</option> 
     <option value="11">11 domain names</option> 
    </select> 
</td> 
<td> 
    <select name="transfer"> 
     <option value="0">No</option> 
     <option value="4.50">Yes</option> 
    </select> 
</td> 
<td> 
    &pound; 
     <input type="text" id="total" readonly /> 
</td> 
</tr> 
</tbody> 
</table> 
</form> 
<script> 
function setPrice() { 
    var years = $('#buy').find('[name="years"]').val(); 
    var names = $('#buy').find('[name="names"]').val(); 
    var transfer = $('#buy').find('[name="transfer"]').val(); 
    var result = parseFloat(years * names + names * transfer, 10).toString().split('.'); 
    if (result[1] === void 0) { 
     result[1] = ''; 
    } 
    while (result[1].length < 2) { 
     result[1] += '0'; 
    } 
    result = result[0] + '.' + result[1].substr(0,2); 
    $('#total').val(result); 
} 
$('form>select').change(setPrice); 
setPrice(); 
</script> 
</div> 

</body> 
</html>

來源

2013-03-22 Chris

看到演示的答案。 – 2013-03-22 08:48:43

包裝內部的代碼document.ready

$(document).ready(function(){ 
$('form>select').change(setPrice); 
setPrice(); 
});

也

var result = parseFloat((years * names) + (names * transfer), 10)

更換

$('form>select').change(setPrice);

與

$('form select').change(setPrice);

因爲$('form>select').change(setPrice);這將選擇直接的孩子而不是後代。

DEMO

來源

2013-03-22 08:40:20

$（document）.ready（function（）{並不是低級的，因爲javascript代碼是在頁面的引導頁面上的，你必須使用它，當你無法控制JS的放置位置時，控制它，你應該將它放在底部 +1（'form> select'）。change（setPrice）;這是錯誤 – Stefan 2013-03-22 08:55:06

謝謝你們，這個表格現在可以工作，我會嘗試鏈接它在Sefan所說的（'form> select'）之後在外部。change（setPrice）;不正確。 – Chris 2013-03-22 09:03:12

表格中的jQuery表格

回答

相關問題