Javascript 计算行上的列添加所有行_Javascript_Html

Javascript 计算行上的列添加所有行

javascript html

Javascript 计算行上的列添加所有行,javascript,html,Javascript,Html,我已经开发了一个代码来构建一个项目的工资成本。问题是只有第一行正在计算我搜索并找到了几个讨论同一问题的论坛，但每种方法/代码看起来都完全不同。此外，我还从youtube视频/论坛复制了完整的编码示例，以复制一个解决方案，但似乎没有一个可行。我知道ID/类可能会有问题，但由于不熟悉编码，所有事情都让我感到困惑。救命啊 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset=

我已经开发了一个代码来构建一个项目的工资成本。问题是只有第一行正在计算

我搜索并找到了几个讨论同一问题的论坛，但每种方法/代码看起来都完全不同。此外，我还从youtube视频/论坛复制了完整的编码示例，以复制一个解决方案，但似乎没有一个可行。我知道ID/类可能会有问题，但由于不熟悉编码，所有事情都让我感到困惑。救命啊

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <form name='vetCosting'>
        <h3> Salaries </h3>
        <table ID="salaries">
            <tr>
                <th>Classification</th>
                <th>Hourly rate</th>
                <th>Hours</th>
                <th>Cost</th>
                <th>Comments</th>
                <th>Type</th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="T1.0">Teacher 1.0</option>
                        <option value="T1.1">Teacher 1.1</option>
                        <option value="T1.2">Teacher 1.2</option>
                        <option value="T1.3">Teacher 1.3</option>
                    </select>
                </td>
                <td><input type="number" name="hourlyRate" value="" onFocus="startCalc();" onBlur="stopCalc()"></td>
                <td><input type="number" name="salaryHours" value="" onFocus="startCalc();" onBlur="stopCalc()"></td>
                <td><input type="number" name="salaryCost" readonly="readonly"></td>
                <td><input type="text" name="salComments"></td>
                <td><input type="text" name="salType"></td>
                <td><input type="button" value="+" ; onclick="ob_adRows.addRow(this)"></td>
                <td><input type="button" value="-" ; onclick="ob_adRows.delRow(this)"></td>
            </tr>
        </table>
    </form>

    <script>
        function startCalc() {
            interval = setInterval("calc()", 2);
        }

        function calc() {
            hrRate = document.vetCosting.hourlyRate.value;
            salHours = document.vetCosting.salaryHours.value;
            document.vetCosting.salaryCost.value = ((hrRate * 1) * (salHours * 1));
        }

        function stopCalc() {
            clearInterval(interval);
        }
    </script>

    <script>
        function adRowsTable(id) {
            var table = document.getElementById(id);
            var me = this;
            if (document.getElementById(id)) {
                var row1 = table.rows[1].outerHTML;

                function setIds() {
                    var tbl_id = document.querySelectorAll('#' + id + ' .tbl_id');
                    for (var i = 0; i < tbl_id.length; i++) tbl_id[i].innerHTML = i + 1;
                }

                me.addRow = function (btn) {
                    btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1) :
                        table.insertAdjacentHTML('beforeend', row1);
                    setIds();
                }

                me.delRow = function (btn) {
                    btn.parentNode.parentNode.outerHTML = '';
                    setIds();
                }
            }
        }
        var ob_adRows = new adRowsTable('salaries');
    </script>
</body>

</html>


薪水
分类
小时费率
小时
成本
评论
类型
教师1.0
教师1.1
教师1.2
教师1.3
函数startCalc（）{
间隔=设置间隔（“计算（）”，2）；
}
函数计算（）{
hrRate=document.vetCosting.hourlyRate.value；
salHours=document.vetCosting.salaryHours.value；
document.vetCosting.salaryCost.value=（（hrRate*1）*（salHours*1））；
}
函数stopCalc（）{
间隔时间；
}
函数adRowsTable（id）{
var table=document.getElementById（id）；
var me=这个；
if（document.getElementById（id））{
var row1=table.rows[1].outerHTML；
函数setIds（）{
var tbl_id=document.queryselectoral（'#'+id+'.tbl_id'）；
对于（var i=0；i


我希望能够添加和删除行，并根据数据输入对每行进行正确计算。
我的第一步是使用setInterval（）更改代码，因为即使输入没有变化，用户只是坐在那里，setInterval（）也会每2毫秒运行一次。我会把它改成一个触发频率要低得多的事件
只需将您的输入更改为：
<td><input type="number" name="hourlyRate" value="" onKeyUp="calc();"></td>

接下来，单击按钮时，将触发此错误：
未捕获引用错误：未在HTMLInputElement.onclick上定义ob_adRows
要更改此项，我们将更改您编写的函数。让我们首先为每一行准备一个模板，然后简单地将其附加到表的innerHTML中。但是，这将不起作用，因为它还将刷新整个表，因此也将从现有行中删除数据。因此，我们使用创建一个新的HTML节点，其中包含一个id为“row_x”的行：
function newRowTemplate(rowCount) {
    var temp = document.createElement('table');
    temp.innerHTML = `<tr id='row_${rowCount}'>
        <td>
            <select>
                <option value="T1.0">Teacher 1.0</option>
                <option value="T1.1">Teacher 1.1</option>
                <option value="T1.2">Teacher 1.2</option>
                <option value="T1.3">Teacher 1.3</option>
            </select>
        </td>
        <td><input type="number" name="hourlyRate" value="" onKeyUp="calc('row_${rowCount}');"></td>
        <td><input type="number" name="salaryHours" value="" onkeyUp = "calc('row_${rowCount}');"></td>
        <td><input type="number" name="salaryCost" readonly="readonly"></td>
        <td><input type="text" name="salComments"></td>
        <td><input type="text" name="salType"></td>
        <td><input type="button" value="+" ; onclick="addRow()"></td>
        <td><input type="button" value="-" ; onclick="removeRow(this)"></td>
    </tr>`;

    return temp.firstChild;
}

最后，我们在原始元素中使用这些新函数，如下所示：
<td><input type="number" name="hourlyRate" value="" onKeyUp="calc('row_0');"></td>

<td><input type="button" value="+" ; onclick="addRow()"></td>
<td><input type="button" value="-" ; onclick="removeRow(this)"></td>



以下是最终结果：

函数计算（id）{
var行=document.getElementById（id）；
var hrRate=row.querySelector（'input[name=hourlyRate]'）。值；
var salHours=row.querySelector（'input[name=salaryHours]'）。值；
row.querySelector（'input[name=salaryCost]'）。value=（（hrRate*1）*（salHours*1））；
}
var table=document.getElementById（'salaries'）；
var rowCount=1；
函数newRowTemplate（行计数）{
var temp=document.createElement（'table'）；
temp.innerHTML=`
教师1.0
教师1.1
教师1.2
教师1.3
`;
返回临时第一个孩子；
}
函数addRow（）{
var newRow=newRowTemplate（rowCount）；
表2.appendChild（纽罗）；
行计数+=1；
}
函数（el）{
el.parentNode.parentNode.remove（）；
行数-=1；
}

薪水
薪水
分类
小时费率
小时
成本
评论
类型
教师1.0
教师1.1
教师1.2
教师1.3
我的第一步是使用setInterval（）更改代码，因为它每2毫秒运行一次，即使输入没有变化，用户只是坐在那里。我会把它改成一个触发频率要低得多的事件
只需将您的输入更改为：
<td><input type="number" name="hourlyRate" value="" onKeyUp="calc();"></td>

接下来，单击按钮时，将触发此错误：
未捕获引用错误：未在HTMLInputElement.onclick上定义ob_adRows
要更改此项，我们将更改您编写的函数。让我们首先为每一行准备一个模板，然后简单地将其附加到表的innerHTML中。但是，这将不起作用，因为它还将刷新整个表，因此也将从现有行中删除数据。因此，我们使用创建一个新的HTML节点，其中包含一个id为“row_x”的行：
function newRowTemplate(rowCount) {
    var temp = document.createElement('table');
    temp.innerHTML = `<tr id='row_${rowCount}'>
        <td>
            <select>
                <option value="T1.0">Teacher 1.0</option>
                <option value="T1.1">Teacher 1.1</option>
                <option value="T1.2">Teacher 1.2</option>
                <option value="T1.3">Teacher 1.3</option>
            </select>
        </td>
        <td><input type="number" name="hourlyRate" value="" onKeyUp="calc('row_${rowCount}');"></td>
        <td><input type="number" name="salaryHours" value="" onkeyUp = "calc('row_${rowCount}');"></td>
        <td><input type="number" name="salaryCost" readonly="readonly"></td>
        <td><input type="text" name="salComments"></td>
        <td><input type="text" name="salType"></td>
        <td><input type="button" value="+" ; onclick="addRow()"></td>
        <td><input type="button" value="-" ; onclick="removeRow(this)"></td>
    </tr>`;

    return temp.firstChild;
}

最后，我们在原始元素中使用这些新函数，如下所示：
<td><input type="number" name="hourlyRate" value="" onKeyUp="calc('row_0');"></td>

<td><input type="button" value="+" ; onclick="addRow()"></td>
<td><input type="button" value="-" ; onclick="removeRow(this)"></td>



以下是最终结果：<