jquery - 将 td append 到表行添加标记名而不是标记本身

Question

我试图在单击按钮时将 td append 到每个表行但它给我 td 作为纯文本，而不是标签

这是我的 js 代码，它使用 jquery 选择每个 tr，然后将 td append 到它

function addColmn() {
    $('tr').each(function(){
       this.append("<td id=" + maxId + " class='not-shaded'></td>");
       maxId++;
    });
}

这是我的html代码

<table border="1">
        <button onclick="addColmn()">Add colomn</button>
        <tr>
            <td onclick="changeState(this);" id="cell1" class="not-shaded"></td>
            <td onclick="changeState(this);" id="cell2" class="not-shaded"></td>
        </tr>

        <tr>
            <td onclick="changeState(this);" id="cell3" class="not-shaded"></td>
            <td onclick="changeState(this);" id="cell4" class="not-shaded"></td>
        </tr>
    </table>

Answer 1

你应该使用 $(this) 而不是 this 。

this is the DOM object, whereas $(this) is the jQuery wrapper around same.

When using this, you can call DOM methods on it, but not jQuery methods. When using $(this), you can call jQuery methods on it, but not DOM methods.

$(function(){


});

function addColmn() {
    $('tr').each(function(){
       var maxId = 0;
       var html = "<td id=" + maxId + " class='not-shaded'></td>";
       $(this).append(html);
       maxId++;
    });
}

td {
   
   height:30px;
   width:30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
        <button onclick="addColmn()">Add colomn</button>
        <tr>
            <td onclick="changeState(this);" id="cell1" class="not-shaded"></td>
            <td onclick="changeState(this);" id="cell2" class="not-shaded"></td>
        </tr>

        <tr>
            <td onclick="changeState(this);" id="cell3" class="not-shaded"></td>
            <td onclick="changeState(this);" id="cell4" class="not-shaded"></td>
        </tr>
</table>