javascript - Escaping generated HTML that onclick has a jQuery function with CSS attribute selector -
i have mechanism generates html in javascript, , need extend mechanism add remove row button.
the row-generating mechanism looks following:
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" + + 1 + "\">" + override.displayname + "</td>"; rowstr += "<td id=\"tdvalue" + + 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>"; (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] + "\" /> " + elements[1] + " "; } rowstr += "</div>"; break; } rowstr += "</td>"; rowstr += "</tr>"; return rowstr; }
the mechanism supposed inject remove button:
debug.injectremovebuttonintooverriderow = function (override, row) { $(row).find('td:last').append("<input type=\"button\" value = \"remove\" onclick=\"$('tr[session-key=\"" + override.sessionkey + "\"]').remove();\" />"); }
html sample:
<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>
is possible escape quotes work?
as per @shilly's suggestion, have moved selector function:
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+"()\" />"); }
Comments
Post a Comment