写出html而不是动态创建元素时出现Javascript错误 - Javascript error when writing out html instead of dynamically creating element

Javascript error when writing out html instead of dynamically creating element

我有一个javascript函数，当通过javascript添加td元素时，它会运行良好的onclick。删除按钮工作正常。但是当我用php创建元素并单击remove时，我得到：

SyntaxError: syntax error
var header = document.getElementById(

即使计数器工作正常。这是范围问题吗？这是我的代码：

JS-

var labor_count = 0;
var part_count = 0;
function incrementLabor(count) {
    labor_count = parseInt(count);
    console.log(labor_count);
}

HTML/PHP-

public function getTableRow()
{
    return '
<tr>
<td>
    <input
        type="text"
        name="work_description[]"
        value="'.$this->description.'">
</td>
<td>
    <input
        class="hours calculate"
        type="text"
        name="hours[]"
        value="'.$this->hours.'"
        onchange="calculate();"
        size="2">
</td>
<td>
    <input
        class="rate calculate"
        type="text"
        name="rate[]"
        value="'.$this->rate.'"
        onchange="calculate();"
        size="2">
</td>
<td>
    <input
        type="button"
        value="Remove"
        onclick="
            (function () {
                var parent = this.parentNode.parentNode; //get the row node
                table.deleteRow(parent.rowIndex); //Delete the row index behind it.
                labor_count--;
                console.log(labor_count);
                if (labor_count === 0) {
                    var header = document.getElementById("labor_header");
                    header.parentNode.removeChild(header);
                })()
            };" >
    </td>
</tr>
';
}

以下是工作功能：

function removeIt(element) {
        var parent = element.parentNode.parentNode; //get the row node
        var table = parent.parentNode;
        table.deleteRow(parent.rowIndex); //Delete the row index behind it.
        labor_count--;
        console.log(labor_count);
        if (labor_count === 0) {
            var header = document.getElementById("labor_header");
            header.parentNode.removeChild(header);
        }
}

getElementById后面的引号（正在关闭onclick="引号。我建议命名您的函数，然后在onclick 中调用它

<script>
function removeIt(element) {
    var parent = element.parentNode.parentNode; //get the row node
    table.deleteRow(parent.rowIndex); //Delete the row index behind it.
    labor_count--;
    console.log(labor_count);
    if (labor_count === 0) {
        var header = document.getElementById("labor_header");
        header.parentNode.removeChild(header);
    }
} 
</script>
<input
type="button"
value="Remove"
onclick="removeIt(this)"
>

此外，在php中，您应该将htmlspecialchar（）放在$this->description、$this->hours和$this-->rate周围，以防它们包含引号或其他特殊字符。

您的javascript格式不正确。应该是

(function () {
    var parent = this.parentNode.parentNode; //get the row node
    table.deleteRow(parent.rowIndex); //Delete the row index behind it.
    labor_count--;
    console.log(labor_count);
    if (labor_count === 0) {
        var header = document.getElementById("labor_header");
        header.parentNode.removeChild(header);
    }
})();

除此之外，我真的建议不要用PHP生成javascript。最好将javascript留在html文件中，只生成一些html元素。

此外，我建议不要使用内联事件处理程序。相反，在页面加载时使用javascript将事件处理程序附加到html元素。

这里有一个链接可以帮助你。