Question

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

我已经搜索并找到了一些讨论相同问题的论坛，但是每种方法/代码看起来都完全不同。另外，我从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>

我希望能够通过基于数据输入正确计算每一行的计算来添加和删除行。

Answer 1

我的第一步是从使用setInterval（）更改代码，因为即使输入没有变化并且用户只是坐在那里，代码也会每2毫秒运行一次。我会将其更改为一个onKeyUp事件，该事件的触发频率要低得多。

只需将您的输入更改为此即可：

<td><input type="number" name="hourlyRate" value="" onKeyUp="calc();"></td>

所以我们摆脱了startCalc（）和stopCalc（）函数。

现在，一旦我们有多行，我们需要一种方法来识别每一行。因此，我们为您的第一行提供一个ID“ row_0”，并将其通过calc（）函数传递，如下所示：

<td><input type="number" name="hourlyRate" value="" onKeyUp="calc('row_0');"></td>

然后我们将您的calc（）方法更新为此，以便它可以单独使用每一行：

function calc(id) {
    var row = document.getElementById(id);
    var hrRate = row.querySelector('input[name=hourlyRate]').value;
    var salHours = row.querySelector('input[name=salaryHours]').value;
    row.querySelector('input[name=salaryCost]').value = ((hrRate * 1) * (salHours * 1));
}

下一步，单击按钮后，会引发此错误：

未捕获的ReferenceError：HTMLInputElement.onclick上没有定义ob_adRows

要更改此设置，我们将更改您编写的功能。首先，为每行准备一个模板，然后将其简单地附加到表的innerHTML中。但是，这将不起作用，因为它还会刷新整个表，因此也从我们现有的行中清除了数据。因此，我们使用this来创建一个新的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;
}

我们直接创建新功能：

function addRow() {
    var newRow = newRowTemplate(rowCount);
    table.appendChild(newRow);
    rowCount += 1;
}

function removeRow(el) {
    el.parentNode.parentNode.remove();
    rowCount -= 1;
}

最后，我们在原始元素中使用这些新功能，如下所示：

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

这是最终结果：

function calc(id) {
  var row = document.getElementById(id);
  var hrRate = row.querySelector('input[name=hourlyRate]').value;
  var salHours = row.querySelector('input[name=salaryHours]').value;
  row.querySelector('input[name=salaryCost]').value = ((hrRate * 1) * (salHours * 1));
}

var table = document.getElementById('salaries');
var rowCount = 1;

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;
}

function addRow() {
  var newRow = newRowTemplate(rowCount);
  table.appendChild(newRow);
  rowCount += 1;
}

function removeRow(el) {
  el.parentNode.parentNode.remove();
  rowCount -= 1;
}

<body>
  <form name="vetCosting">
    <h3> Salaries </h3>
    <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 id="row_0">
        <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_0');"></td>
        <td><input type="number" name="salaryHours" value="" onkeyUp="calc('row_0');"></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>
    </table>
  </form>
</body>

我刚刚意识到代码中的错误。一旦创建了row_x，并且我删除并添加了另一行，由于rowCount返回到x，它将再次创建row_x。您可以通过删除删除行函数中的减量来解决此问题。

计算所有行的行添加列

1 个答案: