JQuery - 用html轉義替換引號

一個表格顯示從我的網站上的數據庫抓取的數據，當單擊一個按鈕時，使用onclick屬性調用「enableEditing」函數。然後，對於表格中每行的一個字段，將使用該字段作爲值並將該鍵作爲輸入名稱顯示輸入文本框。JQuery - 用html轉義替換引號

前：

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

來源

2013-06-12 iswinky

有幾種方法。其中的不容易出錯的人是爲了讓jQuery的/ DOM做轉義：

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

來源

2013-06-12 12:58:55

這偉大的工作，但我注意到的輸入值沒有出現在源/谷歌督察。輸入字段中的數據是否仍然可以被操縱？例如，更新抓取原始值的數據庫 – iswinky

儘管我們動態添加了該值，但瀏覽器的DOM檢查器功能仍應顯示該值（某些檢查器已損壞（例如某些版本的Internet Explorer中的開發人員工具）。無論如何，它在實際操作中應該沒有什麼區別，儘管我不太清楚你究竟在問什麼。 :) –

您應該避免使用.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-12 13:07:16

請低調的人小心解釋一下嗎？ –

我沒有downvote。如果是我的項目，我會願意使用vanilla JS，但是它使用jQuery的規範之一：/ – iswinky

這是一個愚蠢的規範。老實說，如果我受到這樣的限制，我會問「你想讓客戶使用你的網站嗎？或者你想讓他們厭倦它的速度有多慢，並告訴他們的朋友它有多麼糟糕？」 –

嘗試

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

演示：Fiddle

來源

2013-06-12 13:20:03

不完全 - 沒有從另一個單元獲得'name'屬性。 –

@Kolink修復了，現在就試試吧 –

JQuery - 用html轉義替換引號

回答

相關問題