Fatal编程技术网
  • jquery/
  • jQuery表单在表中中断

jQuery表单在表中中断

jquery

jQuery表单在表中中断,jquery,html-table,Jquery,Html Table,我已经创建了一个表单，它可以根据某些选定的标准计算价格，作为一个独立的程序，它工作得很好，不幸的是，由于某些原因，一旦我将代码放入表格的单独单元格中，它就不再工作了，唯一能得到最终结果的方法是刷新浏览器……有什么办法解决这个问题吗，请参阅下面的代码： 把&拿出来，它就可以正常工作了 <!DOCTYPE html> <head> <TITLE>test</TITLE> <script src="javascript/jquery-2.0.0b1

我已经创建了一个表单，它可以根据某些选定的标准计算价格，作为一个独立的程序，它工作得很好，不幸的是，由于某些原因，一旦我将代码放入表格的单独单元格中，它就不再工作了，唯一能得到最终结果的方法是刷新浏览器……有什么办法解决这个问题吗，请参阅下面的代码：

把
&
拿出来，它就可以正常工作了

<!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>


测试
一年
两年
三年
4年
五年
6年
7年
8年
9年
十年
1域名
2个域名
3个域名
4个域名
5个域名
6个域名
7个域名
8个域名
9个域名
10个域名
11个域名
不
对
&磅；
函数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（年份*名称+名称*转移，10）.toString（）.split（'.'）；
如果（结果[1]==无效0）{
结果[1]=''；
}
而（结果[1]。长度<2）{
结果[1]+='0'；
}
结果=结果[0]+'.+结果[1].子字符串（0,2）；
$（'总计'）.val（结果）；
}
$（'form>select'）。更改（setPrice）；
setPrice（）；
将代码包装在
文档中。准备就绪

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

更换

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

$('form select').change(setPrice);
因为
$（'form>select'）。更改（setPrice）这将选择直接子代而不是子代


使用demo.$（document）.ready（函数（）{不是必需的，因为javascript代码在页面的bootom上。当您无法控制JS的放置位置时，您应该/必须使用它，如果您可以控制它，您应该始终将它放在底部+1处进行检测（'form>select'）。更改（setPrice）；这就是错误谢谢各位，这个表单现在可以工作了，我将在Sefan所说的（'form>select'）之后尝试外部链接它。更改（setPrice）；不正确。

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