轉義HTML行情不被認可

Question

所以，我有一個表，如下所示：

<p> 
     <table id="modTable"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Role</th> 
        <th>Points</th> 
        <th>Deaths</th> 
        <th>Attended?</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>user1</td> 
        <td><select name="eventRole"> 
        <option value="referee" selected="selected">Referee</option> 
        <option value="assRef">Ass Ref</option> 
        <option value="player">Player</option> 
        <option value="monster">Monster</option></select></td> 
        <td><input type="text" name="eventPoints" maxlength="2" size="2" value="36"></td> 
        <td></td> 
        <td><input type="checkbox" name="attended" checked></td> 
       </tr> 
       <tr> 
        <td>user2</td> 
        <td><select name="eventRole"> 
        <option value="referee">Referee</option> 
        <option value="assRef">Ass Ref</option> 
        <option value="player" selected="selected">Player</option> 
        <option value="monster">Monster</option></select></td> 
        <td><input type="text" name="eventPoints" maxlength="2" size="2" value="36"></td> 
        <td><input type="text" name="eventDeaths" maxlength="1" size="1" value="0"></td> 
        <td><input type="checkbox" name="attended" checked></td> 
       </tr> 
      </tbody> 
    </table> 
</p></form><div id="addrows">ADD NEW</div> 

和一塊的jQuery增加了一個新的行表如下：

$(function() {$("#addrows").click(function(){ 
    $("#modTable").append("<tr> <td><select name=&quot;username&quot;><option value=&quot;112&quot;>3rd spearman</option><option value=&quot;40&quot;>Alex</option><option value=&quot;157&quot;>alex.kynoch</option><option value=&quot;23&quot;>AndyK</option><option value=&quot;181&quot;>AndyL</option><option value=&quot;27&quot;>AndyMc</option></select></td><td><select name=&quot;eventRole&quot;><option value=&quot;referee&quot;>Referee</option><option value=&quot;assRef&quot;>Ass Ref</option><option value=&quot;player&quot;>Player</option><option value=&quot;monster&quot;>Monster</option></select></td><td><input type=&quot;text&quot; name=&quot;eventPoints&quot; maxlength=&quot;2&quot;></td><td><input type=&quot;text&quot; name=&quot;eventDeaths&quot; maxlength=&quot;1&quot;></td><td><input type=&quot;checkbox&quot; name=&quot;attended&quot; checked></td> </tr>") 
}); 
      }); 

這一切都工作正常，當你點擊「添加新」一個新行出現，但是，新的表單字段未格式正確 - 複選框不是複選框，我似乎無法格式化任何字段使用其屬性（eg size =「2」）

我猜這是因爲我在JQuery中使用HTML實體來轉義雙引號，但是如果我使用ACTUAL雙引號，那麼它會阻止JQuery運行......任何人都可以建議我如何使這項工作，因爲我處於死衚衕！

小提琴這裏：http://jsfiddle.net/vtrcjrqf/

謝謝！ :)

Answer 1

如果你輸入這個到你的HTML直接：

<input type=&quot;checkbox&quot; name=&quot;attended&quot; checked> 

...你會期望瀏覽器正確解析呢？您不會將實體用於屬性值附近的引號。而且你也不用通過jQuery傳遞的HTML。

如果你想有一個雙引號的JavaScript字符串中的雙引號，用反斜槓：

var foo = "I'm in a double-quoted string, \"and this part is in double quotes\""; 

或者，當然了，使用單引號字符串和轉義單引號代替：

var foo = 'I\'m in a single-quoted string, "and this part is in double quotes"'; 

---

邊注：如果你發現你在你的JavaScript代碼在字符串很多HTML的，可以考慮使用一個模板引擎或新template元素代替，桑尼您可以在您的標記編輯器/設計器中創建標記，而不是使用JavaScript代碼編輯器。而特別是如果你有重複 HTML（一次在你的HTML中，然後再次在你的JavaScript中），你真的不想把HTML放在代碼中，因爲它們會失去同步。例如，在對這個問題的評論中，你說當你用this fiddle的反斜槓轉義引號時，「仍然」沒有得到你所期望的。該小提琴的主要問題在於，代碼中的HTML與HTML中的HTML不一樣;您已將size屬性從文本輸入中刪除（至少）。當然，你的代碼中的HTML不是，正好是一樣的（你有一個選擇而不是直接的文本），但是像這樣的差異可以很容易地處理。

---

邊注2：另一個問題是，你要追加行到您的table元素，當你要在它被附加到tbody元素。

---

邊注3：這是無效的有p元素內table元素; p元件can contain phrasing content，但是table元件are flow content。

---

下面是一個不重複HTML的例子;在current陣列可以通過服務器端動態腳本的渲染輸出，或檢索通過AJAX：

$(function() { 
 
    // Current data 
 
    var current = [ 
 
    { 
 
     name: "user1", 
 
     role: "referee", 
 
     points: 36, 
 
     deaths: null, 
 
     attended: true 
 
    }, 
 
    { 
 
     name: "user2", 
 
     role: "player", 
 
     points: 36, 
 
     deaths: 0, 
 
     attended: true 
 
    } 
 
    ]; 
 

 
    // Get the table body 
 
    var tbody = $("#modTable tbody"); 
 

 
    // Get our row model and remove it 
 
    var rowModel = tbody.find("tr").remove(); 
 

 
    // Show the current entries 
 
    current.forEach(function(entry) { 
 
    addRow(entry); 
 
    }); 
 

 
    // Let the user add more 
 
    $("#addrows").click(function() { 
 
    addRow(); 
 
    }); 
 

 
    function addRow(entry) { 
 
    // Clone our model 
 
    var row = rowModel.clone(); 
 

 
    // If we have an entry, fill it in 
 
    if (entry) { 
 
     // Replace the select with the name 
 
     row.find("select[name=username]").closest("td").text(entry.name); 
 

 
     // Fill in fields 
 
     row.find("select[name=eventRole]").val(entry.role); 
 
     if (entry.points === null) { 
 
     row.find("input[name=eventPoints]").remove(); 
 
     } else { 
 
     row.find("input[name=eventPoints]").val(entry.points); 
 
     } 
 
     if (entry.deaths === null) { 
 
     row.find("input[name=eventDeaths]").remove(); 
 
     } else { 
 
     row.find("input[name=eventDeaths]").val(entry.deaths); 
 
     } 
 
     row.find("input[name=attended]").prop(entry.attended); 
 
    } 
 

 
    // Add it 
 
    tbody.append(row); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p> 
 
<table id="modTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Role</th> 
 
     <th>Points</th> 
 
     <th>Deaths</th> 
 
     <th>Attended?</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select name="username"> 
 
      <option value="112">3rd spearman</option> 
 
      <option value="40">Alex</option> 
 
      <option value="157">alex.kynoch</option> 
 
      <option value="23">AndyK</option> 
 
      <option value="181">AndyL</option> 
 
      <option value="27">AndyMc</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <select name="eventRole"> 
 
      <option value="referee">Referee</option> 
 
      <option value="assRef">Ass Ref</option> 
 
      <option value="player">Player</option> 
 
      <option value="monster">Monster</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="eventPoints" maxlength="2" size="2" value="0"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="eventDeaths" maxlength="1" size="1" value="0"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name="attended"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</p> 
 
<div id="addrows">ADD NEW</div>