表格中的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表格

回答

相关问题