Question

我有在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();\" />");
}

HTML示例：

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

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

Answer 1

根据@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+"()\" />");
}

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

1 个答案: