Question

所以这应该是非常基础的，但根据我的理解，JQuery的html（）函数应该与javascript innterHTML函数几乎相同？如果是这样的话，我在测试中根本找不到这个。我的目的是替换我打开/关闭的tr打开/关闭之间的html内容

HTML：

<table>
  <tr id="task:1234">
    <td>
      <button id="abutton" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton1" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton2" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton3" type="button">Click Me!</button>
    </td>
  </tr>
</table>

和我的javascript：

$(document).ready(function() {
  $("#abutton").click(function() {
    var newtddata = "<td><button id=\"abutton\" type=\"button\">I've been clicked!</button></td>";
    alert("Handler for .click() called.");
    //$("#task:1234").html(newtddata);
    document.getElementById("task:1234").innerHTML = newtddata;
  });
});

所以，当编写脚本时，这可以工作......任务的innerHTML：1234 id tr被newtddata变量字符串替换。但是尝试使用JQuery html（）函数，没什么。我应该使用replaceWith吗？如果是这样，我如何指定将replaceWith指向tr的innerHTML，而不是tr本身？

很抱歉，如果这很明显，JavaScript并不是我的第一语言，我需要在短时间内解决这个问题。

Answer 1

问题在于jQuery并不喜欢＆＃39; :标记中的id冒号，无论如何都应该避免。将标签更改为其他标签，或将其转义

$('#task\\:1234')

Answer 2

JQuery使用CSS语法选择元素，某些字符被解释为CSS符号。

例如，除了字母，数字，连字符和下划线之外，在首字母(a-z or A-Z)之后的ID属性也可以使用句点和冒号。冒号(":")和句点(".")在JQuery选择器的上下文中存在问题，因为它们分别表示伪类和类。

为了告诉JQuery按字面意思处理这些字符而不是CSS符号，必须escaped将two backslashes置于其前面。

＆＃13;

$(document).ready(function() {
  $("#abutton").click(function() {
    var newtddata = "<td><button id=\"abutton\" type=\"button\">I've been clicked!</button></td>";
    alert("Handler for .click() called.");
    $(modifyMe("#task:1234")).html(newtddata);
    //document.getElementById("task:1234").innerHTML = newtddata;
  });
});

function modifyMe( myid ) {
    return myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" ); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="task:1234">
    <td>
      <button id="abutton" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton1" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton2" type="button">Click Me!</button>
    </td>
    <td>
      <button id="abutton3" type="button">Click Me!</button>
    </td>
  </tr>
</table>

＆＃13;

Jquery html？有没有搞错？

2 个答案: