Question

表格显示从我网站上的数据库中获取的数据，当单击按钮时，使用onclick属性调用“enableEditing”函数。然后，对于表中每行的一个字段，将使用字段作为值显示输入文本框，并将键作为输入名称。

之前：

<tr class="data_row">
    <td class="property_cell">project ref</td>
    <td class="myNumber">200407</td>
</tr>

后：

<tr class="data_row">
    <td class="property_cell">project ref</td>
    <td class="myNumber">
        <input name="project ref" value="200407">
    </td>
</tr>

jQuery的：

function enableEditing(){

    $("#object_data tr").each(function(){
        var key = $(this).children(".property_cell").html();
        var value = $(this).children(".myNumber").text();
        $(this).children(".myNumber").html("<input name='" + key + "' value='" + value + "'>");
    });
}

这样可以正常工作，但是数据库中的某些数据包含语音标记或单引号，当更改为输入字段时会混淆输入html。如何为每个输入字段转义html？

Answer 1

有几种方法。其中一个容易出错的问题是让jQuery / DOM执行转义：

var input = $('<input name="'+key+'">');
input.val(value);
$(this).children(".myNumber").empty().append(input);

Answer 2

尝试

$('.myNumber').contents().replaceWith(function(){
    return $('<input />', { name: $(this).parent().prev().text(), value : $(this).text()});
})

演示：Fiddle

Answer 3

你应该避免使用.html()来做这样的事情。实际上，只是不要使用jQuery。 Vanilla JS非常优越 - jQuery完全是使用它构建的！

var rows = document.getElementById('object_data').rows, l = rows.length, i, td, inp;
for( i=0; i<l; i++) {
    td = rows[i].cells[1];
    if( !td.className.match(/\bmyNumber\b/)) continue; // failsafe
    inp = document.createElement('input');
    inp.type = "text";
    inp.name = rows[i].cells[0].firstChild.nodeValue;
    inp.value = td.firstChild.nodeValue;
    td.replaceChild(inp,td.firstChild);
}

虽然它可能看起来更像代码，但它的运行速度至少比jQuery替代品快一个数量级，可能比两个或三个快。

jsFiddle
jsPerf

JQuery - 用html转义替换引号

3 个答案: