我想创建一个分层的工资计算器实用程序。
在我的Javascript文件中,我将文本输入字段中具有的名称列表中的行和字段动态添加到使用HTML创建的表中。这些行包括一个名称标签列,一个文本输入列(用于输入总收入)和一个计算得出的薪酬输出列。
当我在“总收入”列中的文本输入中进行更改时,我希望它自动更新“计算的薪酬”列。尽管我可以将元素ID跟踪到calculatePay函数,但似乎无法使用或设置其属性。我感到它们也不是唯一。有任何想法吗?
顺便说一句,您必须立即单击更新按钮以运行Javascript。
编辑-根据建议进行了一些更改。似乎仍然无法接受传递给calculatePay函数的变量,只是将它们转过来并将它们吐回到表的Pay列中。
编辑-已解决。问题是关闭,起初我听不懂,但这里很薄。为了隔离变量的范围,使它们不会在每次循环时都被重写,因此需要在每次循环迭代时都会重新创建的函数中声明它们(因为Javascript的作用域是函数而不是代码块)。注意事项-如果仅在循环中间声明一个无名函数,则此方法将无效。您必须将其返回到变量(即var buildElement = function(){Yada Yada}();
)。同样,在函数之后添加()
来执行它。
Java脚本
function buildTable(){
var artists = document.getElementById("artlist").value;
var names = artists.split(",");
var len = names.length;
var ptable = document.getElementById("payTable");
var rowLength = ptable.rows.length;
for (i=0 ; i < len; i++){
var buildElement = function(){
var row = ptable.insertRow(rowLength);
var nameCell = row.insertCell(0);
var grossCell = row.insertCell(1);
var payCell = row.insertCell(2);
var grossText = document.createElement("input");
grossText.type = "type";
grossText.name = "gtext[]";
grossText.id = "gross" + names[i];
payCell.id = "pay" + names[i];
grossText.onchange = function(){calculatePay(payCell.id, grossText.id);};
grossCell.appendChild(grossText);
nameCell.innerHTML = names[i];
}();
}
}
function resetTable(){
var ptable = document.getElementById("payTable");
var rowLength = ptable.rows.length;
if (rowLength>2){
for (p=rowLength; p>2; p--){
ptable.deleteRow(2);
}
}
buildTable();
}
function calculatePay(target, gross) {
document.getElementById(target).innerHTML = document.getElementById(gross).value;
}
的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="./js/script.js"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div>
<table id="payTable">
<tr>
<th colspan=3 class="hdr">
Calculator
</th>
</tr>
<tr>
<th class="hdr">
Name
</th>
<th class="hdr">
Gross
</th>
<th class="hdr">
Pay
</th>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th colspan=3 class="hdr">
SETTINGS
</th>
</tr>
<tr>
<th colspan=3 class="hdr">
Breakpoints
</th>
</tr>
<tr>
<td>Break 1 at $
<input type="text" name="break1" id="break1" value="300"/>
</td>
<td>
</td>
<td>Break 2 at $
<input type="text" name="break2" id="break2" value="900"/>
</td>
</tr>
<tr>
<th colspan=3 class="hdr">
Percentage levels
</th>
</tr>
<tr>
<td>
Below break 1:
<input type="text" size="4" name="per1" id="per1" value="50"/>%
</td>
<td>
Between breaks 1 and 2:
<input type="text" size="4" name="per2" id="per2" value="60"/>%
</td>
<td>
Over break 2:
<input type="text" size="4" name="per3" id="per3" value="70"/>%
</td>
</tr>
<tr>
<td>
Artists:
<input type="text" name="artlist" id="artlist" value="Brian,Eric,Christie,Cynthia,Shawn"/>
</td>
<td>
</td>
<td class="hdr">
<button onclick="resetTable()">Update</button>
</td>
</tr>
</div>
</body>
</html>
最佳答案
问题是关闭,起初我听不懂,但这里很薄。为了隔离变量的范围,以免每次循环时它们都不会被重写,因此需要在每次循环迭代时都会重新创建的函数中声明它们(因为javascript的作用域是函数而不是代码块)。注意事项-如果仅在循环中间声明一个无名函数,则此方法将无效。您必须将其返回到变量(即“ var buildElement = function(){Yada Yada}();“)。同样,在函数之后添加()以执行它。
Java脚本
function buildTable(){
var artists = document.getElementById("artlist").value;
var names = artists.split(",");
var len = names.length;
var ptable = document.getElementById("payTable");
var rowLength = ptable.rows.length;
for (i=0 ; i < len; i++){
var buildElement = function(){
var row = ptable.insertRow(rowLength);
var nameCell = row.insertCell(0);
var grossCell = row.insertCell(1);
var payCell = row.insertCell(2);
var grossText = document.createElement("input");
grossText.type = "type";
grossText.name = "gtext[]";
grossText.id = "gross" + names[i];
payCell.id = "pay" + names[i];
grossText.onchange = function(){calculatePay(payCell.id, grossText.id);};
grossCell.appendChild(grossText);
nameCell.innerHTML = names[i];
}();
}
}
function resetTable(){
var ptable = document.getElementById("payTable");
var rowLength = ptable.rows.length;
if (rowLength>2){
for (p=rowLength; p>2; p--){
ptable.deleteRow(2);
}
}
buildTable();
}
function calculatePay(target, gross) {
document.getElementById(target).innerHTML = document.getElementById(gross).value;
}
的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="./js/script.js"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div>
<table id="payTable">
<tr>
<th colspan=3 class="hdr">
Calculator
</th>
</tr>
<tr>
<th class="hdr">
Name
</th>
<th class="hdr">
Gross
</th>
<th class="hdr">
Pay
</th>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th colspan=3 class="hdr">
SETTINGS
</th>
</tr>
<tr>
<th colspan=3 class="hdr">
Breakpoints
</th>
</tr>
<tr>
<td>Break 1 at $
<input type="text" name="break1" id="break1" value="300"/>
</td>
<td>
</td>
<td>Break 2 at $
<input type="text" name="break2" id="break2" value="900"/>
</td>
</tr>
<tr>
<th colspan=3 class="hdr">
Percentage levels
</th>
</tr>
<tr>
<td>
Below break 1:
<input type="text" size="4" name="per1" id="per1" value="50"/>%
</td>
<td>
Between breaks 1 and 2:
<input type="text" size="4" name="per2" id="per2" value="60"/>%
</td>
<td>
Over break 2:
<input type="text" size="4" name="per3" id="per3" value="70"/>%
</td>
</tr>
<tr>
<td>
Artists:
<input type="text" name="artlist" id="artlist" value="Brian,Eric,Christie,Cynthia,Shawn"/>
</td>
<td>
</td>
<td class="hdr">
<button onclick="resetTable()">Update</button>
</td>
</tr>
</div>
</body>
</html>