如何在点击时在tr内打开表tr

Question

我有一张桌子，当点击加号图标时，我想在 tr 内打开相同的 tr。我不明白我使用哪个 html 元素来打开。

请帮帮我。 提前致谢。

<div class="procedure-table">
    <table class="table" style="border: 2px slide;">
        <thead>
            <tr>
                <th>Procedure Name</th>
                <th>Cost</th>
                <th>Taxes</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="proce-td">
                    <ul>
                        <li>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting ghj industry.<span><a href="">[+]</a></span>
                            </p>
                        </li>
                    </ul>
                </td>
                <td class="cost-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td class="taxes-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td>
                    <div class="note-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <i class="material-icons close-icon2">close</i>
                    <i class="material-icons edit-icon">edit</i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

您可以使用关闭图标。它应该从打开->关闭->打开切换 使用 jquery 触发打开（appendChild 或 insertAfter）和关闭（removeChild 或简单地删除）的事件。

jQuery(document).ready(function() {
    jQuery("#plus").click(function() {
        $("#main").append('<tr><td>A</td><td>B</td><td>C</td><td>D</td><td></td></tr>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="main">
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td><a href="#" id="plus">[+]</a></td>
</tr>
</table>