问题描述
我的输入框有问题,未显示任何值。
for i = 1:length(x_vals)
syms f(y);
f(y) = 3 * x_vals(i)^(7) + 2 * y^(5) - x_vals(i)^(3) + y^(3);
df = diff(f,y);
f_func = matlabFunction(f(y));
f_prime = matlabFunction(df);
a = 4;
tolerance = 10.^-6;
root(i) = Newton(f_func,f_prime,a,tolerance);
%value(i) = G(x_vals(i),root(i));
new_x = double(x_vals(i));
new_y = double(root(i));
value = 3 * new_x^7 + 2 * new_y^5 - new_x^3 + new_y^3;
if (value >= -3 - e && value <= -3 + e)
y_vals(i) = root(i);
z_vals(i) = -3;
end
end
var renumber = 0;
function addItem() {
renumber++;
var html = "<tr";
html += "<td id='itemNum'>" + renumber + "</td>";
html += "<td><input name='itemName[]'></td>";
html += "<td><input name='itemDescription[]'></td>";
html += "<td><span class='currency'>$</span><input id='perHour' value='0' name='amountPerHour[]'></td>";
html += "<td><input id='lineHours' value='0' name='hours[]'></td>";
html += "<td><span class='currency'>$</span><input id='linetotal' onblur='linetotal(this);' value='0' name='linetotal[]'></td>";
html += "<td><button type='button' id='remove_button' onclick='removeItem();'> X </button></td>";
html += "</tr>";
document.getElementById("addItems").insertRow().innerHTML = html;
}
function removeItem() {
document.getElementById("addItems").deleteRow(0);
renumber--;
var reorder = tblRow.rows;
for(var i = 0; i < reorder.length; i++) {
renumber[i];
renumber++;
}
document.getElementById("itemNum").innerHTML = renumber;
}
function linetotal(elem) {
var mainRow = document.getElementById(elem);
var AmtPerHour = mainRow.getElementsByTagName('td').getElementById('perHour')[0].value;
var lnHrs = mainRow.getElementsByTagName('td').getElementById('lineHours')[0].value;
var total = mainRow.getElementsByTagName('td').getElementById('linetotal')[0];
var myResult = AmtPerHour * lnHrs;
total.value = myResult;
}
我最担心的是值没有出现。
第二个问题,但我可以忍受:
对于行,row1,row2,row3。如果我删除row2,我希望它成为row1,row2。
现在是第1行,第3行。我在说#表部分。
有什么想法吗?
解决方法
您好,请在下面找到解决您的第一个和第二个问题的片段。 我对您的代码进行了一些修复。
-
您的数据未显示,因为
getElementById
希望您将元素ID作为字符串传递,但是您正在将元素ID传递给它,因此此document.getElementById(elem)
无法正常工作。 -
您正在计算该字段变得模糊时的行总数,但是当用户对
amount per hour
或total hours
进行更改时,也应该计算行总数,因此我也向这些字段添加了onblur。 -
您的删除行始终删除第一行,无论我尝试删除哪一行(
document.getElementById("addItems").deleteRow(0);
将始终删除表中的第一行),因此我添加了该函数的行引用,现在它将删除相应的行。 -
我向您的Javascript添加了“到期金额总计”方法,以计算每次更新表(插入/删除行)时的到期金额,并更新标签值到期金额:0.00美元
-
无论何时删除行,我都添加了对所有行重新编号的逻辑。 (您的第二个问题不再存在,所以不要再忍受它了。))。
var renumber = 0;
// trigger everytime there is change in the table row to calculate the new due amount.
function calculateDueAmount() {
var tblRows = document.getElementById("addItems").getElementsByTagName('tr');
let total = 0;
for (var i = 0; i < tblRows.length; i++) {
let lineTotal = tblRows[i].getElementsByTagName('td')[5].getElementsByTagName('input')[0].value;
total += Number(lineTotal)
}
document.getElementById("amountDue").innerText = total.toFixed(2);
}
// no changes required in this
function addItem() {
renumber++;
var html = "<tr>";
html += "<td id='itemNum'>" + renumber + "</td>";
html += "<td><input name='itemName[]'></td>";
html += "<td><input name='itemDescription[]'></td>";
html += "<td><span class='currency'>$</span><input id='perHour' onblur='lineTotal(this);' value='0' name='amountPerHour[]'></td>";
html += "<td><input id='lineHours' onblur='lineTotal(this);' value='0' name='hours[]'></td>";
html += "<td><span class='currency'>$</span><input id='lineTotal' onblur='lineTotal(this);' value='0' name='lineTotal[]'></td>";
html += "<td><button type='button' id='remove_button' onclick='removeItem(this);'> X </button></td>";
html += "</tr>";
document.getElementById("addItems").insertRow().innerHTML = html;
}
// updated and sanitized the logic to delete the row
function removeItem(elem) {
let rowToDelete = elem.parentElement.parentElement;
let rowNumber = rowToDelete.getElementsByTagName('td')[0].innerText;
document.getElementById("addItems").deleteRow(rowNumber - 1);
let tblRows = document.getElementById('addItems').getElementsByTagName('tr');
let j = 0;
for (; j < tblRows.length; j++) {
tblRows[j].getElementsByTagName('td')[0].innerText = j + 1
}
calculateDueAmount(); // calculate due amount since row got deleted.
renumber = j;
}
function lineTotal(elem) {
var mainRow = elem.parentElement.parentElement;
var AmtPerHour = mainRow.getElementsByTagName('td')[3].getElementsByTagName('input')[0].value;
var lnHrs = mainRow.getElementsByTagName('td')[4].getElementsByTagName('input')[0].value;
var total = mainRow.getElementsByTagName('td')[5].getElementsByTagName('input')[0];
var myResult = Number(AmtPerHour) * Number(lnHrs);
total.value = myResult;
calculateDueAmount(); // calculate due amount since row got added
}
<table>
<tr>
<th>#</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Amount Per Hour</th>
<th>Total Hours</th>
<th>Line Total</th>
</tr>
<tbody id="addItems"></tbody>
</table>
<p>
<button type="button" onclick="addItem();">
Add Item
</button>
</p>
<p>
Amount Due: $<span id="amountDue">0.00</span>
<script type="text/javascript">
//add the amounts from all items.
//if none added then have it set to zero.
</script>
</p>
<p>
Due Date:
<script type="text/javascript">
//start it 2 weeks from actual date
</script>
</p>
<p>
<input id="invoice_submit" type="submit" name="submit">
</p>