Question

我有一个onclick函数，该函数将HTML标记（一个表）添加到具有id属性的特定div中。

示例：

$(‘#someDiv’).html(‘<table id=“userTable”><\table>’);

我想创建另一个将HTML标记添加到我已经通过jQuery添加的标记的功能。

示例：

$(‘#userTable’).html(‘<tr><td>Hello<\td><\tr>’);

但是，计算机不知道id“ userTable”，因此没有向table添加任何内容。

如何从另一个函数访问此table并添加到其HTML标记中？

Answer 1

我不确定“ userTable”是静态还是动态ID。这就是我所需要的

    $(function(){
        $("#btnAddRow").hide();

        $("#btnAddTable").click(function(){

            let targetDiv = $("#targetDiv"),
                new_table = $("" +
                    "<table border='1' id='userTable'>" +
                    "<thead>" +
                    "   <tr>" +
                    "       <th>Column 1</th>" +
                    "       <th>Column 2</th>" +
                    "   </tr>" +
                    "</thead>" +
                    "<tbody></tbody>" +
                    "</table>");

            targetDiv.append(new_table);

            $("#btnAddRow").show();
        });

        $("#btnAddRow").click(function(){

            let targetDiv = $("#targetDiv"),
                userTable = targetDiv.find("#userTable"),
                new_tr = $("" +
                    "<tr>" +
                    "   <td>Something</td>" +
                    "   <td>Something Else</td>" +
                    "</tr>");

            userTable.find("tbody").append(new_tr);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnAddTable">Add Table</button>
<button type="button" id="btnAddRow">Add Row</button>

<div id="targetDiv">

</div>

将HTML标记添加到jQuery添加的div中

1 个答案: