2

一个表格显示了从我网站上的数据库中获取的数据，当单击按钮时，使用 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？

4

3 回答 3

3

There are several ways. One of the less error-prone ones is to make jQuery/DOM do the escaping:

var input = $('<input name="'+key+'">');
input.val(value);
$(this).children(".myNumber").empty().append(input);
于 2013-06-12T12:58:55.063 回答
2

尝试

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

演示：小提琴

于 2013-06-12T13:20:03.027 回答
0

你应该避免使用.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

于 2013-06-12T13:07:16.607 回答