Question

我正在尝试在单击按钮时将td附加到每个表行但它给了我作为纯文本的td，而不是标签

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

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是DOM object，而$(this)是jQuery包装器。

使用this时，您可以在其上调用DOM methods，但不能调用jQuery   方法。使用$(this)时，可以在其上调用jQuery方法，但是   不是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>

将td附加到表行会添加标记名而不是标记本身

1 个答案: