转义onclick生成的HTML具有带有CSS属性选择器的jQuery函数

Escaping generated HTML that onclick has a jQuery function with CSS attribute selector

本文关键字：属性 CSS 选择器 函数 jQuery onclick HTML 转义      更新时间：2023-09-26

我有在 JavaScript 中生成 HTML 的机制，我需要扩展此机制以添加删除行按钮。

行生成机制如下所示：

debug.createOverrideRow = function (override) {
    var rowStr = "";
    if (override.AutoDisplay) {
        rowStr += "<tr session-key='"" + override.SessionKey + "'" ";
    } else {
        rowStr += "<tr class='"hide'" session-key='"" + override.SessionKey + "'" ";
    }
    rowStr += "session-key-data-type='"" + override.DataType + "'">";
    rowStr += "<td id='"tdDisplayName" + i + 1 + "'">" + override.DisplayName + "</td>";
    rowStr += "<td id='"tdValue" + i + 1 + "'">";
    switch (override.DataType) {
        case "NullableInteger":
        case "Integer":
        case "rowString":
            rowStr += "<input type='"text'" onChange='"common.validateField(this, " + override.ValidationPattern + ")'" onBlur='"common.validateField(this, " + override.ValidationPattern + ")'" />";
            break;
        case "Array":
            rowStr += "<input type='"text'"/>";
            break;
        case "Date":
            rowStr += "<input class='"datePicker'" placeholder='"yyyy-mm-dd'" type='"text'" onChange='"common.validateDate(this)'" onBlur='"common.validateDate(this)'" />";
            break;
        case "Boolean":
            rowStr += "<input type='"checkbox'"/>";
            break;
        case "Radio":
            var inputs = override.InputList.split(";");
            rowStr += "<div>";
            for (var j = 0; j < inputs.length; j++) {
                var elements = inputs[j].split(":");
                rowStr += "<input id='"rad" + j + "'" name='"" + override.SessionKey + "'" type='"radio'" value='"" + elements[0] + "'" />&nbsp;" + elements[1] + "&nbsp;";
            }
            rowStr += "</div>";
            break;
    }
    rowStr += "</td>";
    rowStr += "</tr>";
    return rowStr;
}

应该注入删除按钮的机制：

debug.injectRemoveButtonIntoOverrideRow = function (override, row) {
    $(row).find('td:last').append("<input type='"button'" value = '"Remove'" onClick='"$('tr[session-key='"" + override.SessionKey + "'"]').remove();'" />");
}

网页示例：

<tr session-key="data.SampleId" session-key-data-type="NullableInteger"><td id="tdDisplayName71">Sample Id</td><td id="tdValue71"><input type="text"><input type="button" value="Remove" onclick="$(" tr[session-key="data.SampleId" ]').remove();'=""></td></tr>

是否可以转义引号以便这样做？

根据@Shilly的建议，我已将选择器移动到一个函数中：

debug.injectRemoveButtonIntoOverrideRow = function (override, row) {
    var cleanedSessionKey = override.SessionKey.replace(/[^a-zA-Z0-9]/g, "");
    $(row).find('td:last').append("<script type='"text/javascript'"> function remove" + cleanedSessionKey + "(){ $('tr[session-key='"" + override.SessionKey + "'"]').remove(); }</script><input type='"button'" value = '"Remove'" onClick='"remove"+cleanedSessionKey+"()'" />");
}
相关文章：