我建立了一种方法,每次用户更改下拉菜单的值时,都会生成一些HTML代码。该代码应该显示在页面上的特定区域,但是我不知道如何在该位置显示即时HTML。
下面的页面是我的index.htm,其中包含代码。它正确显示了我的数组,但是我无法在我的div id = liab_layers中显示它……只是不知道从那里去哪里。
希望有人能帮帮我!
编辑:我已经修改了代码。现在,它显示了我想要的内容,但没有显示在我想要的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CGL Coverage Demo</title>
</head>
<style type="text/css">
.table_ex {
margin: auto;
padding: 0 auto 10px auto;
}
.coverage_header {
font-weight: bold;
font-size: 13pt;
text-align: center;
text-decoration: underline;
}
.layers {
text-align: center;
display: none;
}
.layer_desc {
text-align: right;
}
.total {
border-top: 1px solid #000;
text-align: center;
}
</style>
<script src="jquery-2.1.1.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('.show_layers').click(function() {
$('.layers').toggle("slide");
});
});
$(document).ready(function() {
function handler() {
var currLimit = $('.limits_drop').val();
var default_aggLimit = $('.genagg').val();
$('.genagg').val(currLimit); // changes the gen agg to match the occ limits
var book_rate1M = 0.8800;
var ILF = ["100", "120", "133", "143", "153", "103", "103", "103", "103", "103"];
var minprem = ["750", "400"];
var GR = 67000000 / 1000; // gross receipts
// calculate the occurrence limit
var maxlim = $('.limits_drop').val();
var maxlim = maxlim.replace(/[^\d]/g, ''); // change to numbers only
var maxlayers = maxlim / 1000000; // get the number of layers
// calculate book rates for each layer
var bookrates = [book_rate1M];
var totalprem = 0;
var finalprem;
var tempcode;
var htmlcode = ["<tr class=\"layers\"><td></td><td class=\"layer_desc\">1M Layer</td><td>0.88</td><td>100%</td><td>$58,960</td><td>$750</td><td>0%</td><td>0.88</td><td>$58,960</td></tr>"];
document.getElementById('liab_layers').innerHTML += htmlcode[0];
for(var i = 1; i < maxlayers; i++) {
bookrates[i] = ((ILF[i] - ILF[i-1])/100) * bookrates[i-1];
finalprem = bookrates[i] * GR;
totalprem += finalprem;
var tempcode = "<tr class=\"layers\"><td><\/td><td class=\"layer_desc\">" + (i+1) + "M Layer<\/td><td>" + bookrates[i] + "<\/td><td>" + ILF[i] + "\%<\/td><td>\$" + (bookrates[i] * GR) + "<\/td><td>\$400<\/td><td>0\%<\/td><td>" + bookrates[i] + "<\/td><td>\$" + finalprem + "<\/td><\/tr>";
htmlcode.push(tempcode);
document.getElementById('liab_layers').innerHTML += htmlcode[i];
}
};
$('.limits_drop').mouseup(handler);
$('.limits_drop').keyup(handler);
});
</script>
<body>
<form>
<table class="table_ex">
<tr class="coverage_header">
<td></td>
<td>Form Name</td>
<td>Book Rate</td>
<td>ILF</td>
<td>Book Prem</td>
<td>Min Prem</td>
<td>Deviation</td>
<td>Dev Rate</td>
<td>Final Prem</td>
</tr>
<tr>
<td><input type="checkbox" checked></td>
<td>Commercial General Liability</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><dd />Per Occurrence Limit</td>
<td>
<select class="limits_drop">
<option value="$1,000,000">$1,000,000</option>
<option value="$2,000,000">$2,000,000</option>
<option value="$3,000,000">$3,000,000</option>
<option value="$4,000,000">$4,000,000</option>
<option value="$5,000,000">$5,000,000</option>
<option value="$6,000,000">$6,000,000</option>
<option value="$7,000,000">$7,000,000</option>
<option value="$8,000,000">$8,000,000</option>
<option value="$9,000,000">$9,000,000</option>
<option value="$10,000,000">$10,000,000</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><dd />Display Layers <input type="checkbox" class="show_layers"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<div id="liab_layers"></div>
<tr>
<td></td>
<td class="layer_desc">Total Premium</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">$90,209</td>
</tr>
<tr>
<td></td>
<td><dd />Aggregate Limit</td>
<td align="center"><input type="text" value="$5,000,000" class="genagg" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
最佳答案
没关系,我想通了。这不是一种优雅的做事方式,但是它有效,这就是我所需要的。如果其他人偶然发现此代码并需要一些指导,则在下面的代码中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CGL Coverage Demo</title>
</head>
<style type="text/css">
.table_ex {
margin: auto;
padding: 0 auto 10px auto;
}
.coverage_header {
font-weight: bold;
font-size: 13pt;
text-align: center;
text-decoration: underline;
}
.layers {
text-align: center;
display: none;
}
.layer_desc {
text-align: right;
}
.total {
border-top: 1px solid #000;
text-align: center;
}
</style>
<script src="jquery-2.1.1.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('.show_layers').click(function() {
$('.layers').toggle("slide");
});
});
$(document).ready(function() {
function handler() {
var currLimit = $('.limits_drop').val();
var default_aggLimit = $('.genagg').val();
$('.genagg').val(currLimit); // changes the gen agg to match the occ limits
var book_rate1M = 0.8800;
var ILF = ["100", "120", "133", "143", "153", "103", "103", "103", "103", "103"];
var minprem = "$750";
var GR = 67000000 / 1000; // gross receipts
// calculate the occurrence limit
var maxlim = $('.limits_drop').val();
var maxlim = maxlim.replace(/[^\d]/g, ''); // change to numbers only
var maxlayers = maxlim / 1000000; // get the number of layers
var totalprem = 0;
// reset
document.getElementById('col1').innerHTML = " ";
document.getElementById('col2').innerHTML = " ";
document.getElementById('col3').innerHTML = " ";
document.getElementById('col4').innerHTML = " ";
document.getElementById('col5').innerHTML = " ";
document.getElementById('col6').innerHTML = " ";
document.getElementById('col7').innerHTML = " ";
document.getElementById('col8').innerHTML = " ";
for(var i = 0; i < maxlayers; i++) {
if(i > 0) {
bookrate = ((ILF[i] - ILF[i-1])/100) * book_rate1M;
bookrate = bookrate.toFixed(2);
minprem = "$400";
} else {
bookrate = book_rate1M;
minprem = "$750";
}
finalprem = bookrate * GR;
totalprem += finalprem;
document.getElementById('col1').innerHTML += (i+1) + "M Layer<br>";
document.getElementById('col2').innerHTML += bookrate + "<br>";
document.getElementById('col3').innerHTML += ILF[i] + "%<br>";
document.getElementById('col4').innerHTML += "$" + finalprem + "<br>";
document.getElementById('col5').innerHTML += minprem + "<br>";
document.getElementById('col6').innerHTML += "<input type=\"text\" length=\"4\" size=\"3\" value=\"0\">%<br>";
document.getElementById('col7').innerHTML += "<input type=\"text\" length=\"4\" size=\"3\" value=\"" + bookrate + "\"><br>";
document.getElementById('col8').innerHTML += "$<input type=\"text\" length=\"10\" size=\"7\" value=\"" + (bookrate * GR) + "\"><br>";
}
document.getElementById('total').innerHTML = "$" + totalprem;
};
$('.limits_drop').mouseup(handler);
$('.limits_drop').keyup(handler);
});
</script>
<body>
<form>
<table class="table_ex">
<tr class="coverage_header">
<td></td>
<td>Form Name</td>
<td>Book Rate</td>
<td>ILF</td>
<td>Book Prem</td>
<td>Min Prem</td>
<td>Deviation</td>
<td>Dev Rate</td>
<td>Final Prem</td>
</tr>
<tr>
<td><input type="checkbox" checked></td>
<td>Commercial General Liability</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><dd />Per Occurrence Limit</td>
<td>
<select class="limits_drop">
<option value="" selected></option>
<option value="$1,000,000">$1,000,000</option>
<option value="$2,000,000">$2,000,000</option>
<option value="$3,000,000">$3,000,000</option>
<option value="$4,000,000">$4,000,000</option>
<option value="$5,000,000">$5,000,000</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><dd />Display Layers <input type="checkbox" class="show_layers"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="layers">
<td><div id="col0"></div></td>
<td><div id="col1"></div></td>
<td><div id="col2"></div></td>
<td><div id="col3"></div></td>
<td><div id="col4"></div></td>
<td><div id="col5"></div></td>
<td><div id="col6"></div></td>
<td><div id="col7"></div></td>
<td><div id="col8"></div></td>
</tr>
<tr>
<td></td>
<td class="layer_desc">Total Premium</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"><div id="total"></div></td>
</tr>
<tr>
<td></td>
<td><dd />Aggregate Limit</td>
<td align="center"><input type="text" value="$5,000,000" class="genagg" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
关于javascript - 如何使用JavaScript/Jquery在 anchor 中显示动态生成的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23564309/