利用jquery给指定的table添加一行、删除一行

最新推荐文章于 2022-12-31 10:35:43 发布

wl1121

最新推荐文章于 2022-12-31 10:35:43 发布

阅读量271

点赞数

分类专栏： JQuery 文章标签： jQuery ViewUI

JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种用于记录患者用药情况的表单设计及其实现方法，包括如何通过JavaScript添加新的用药记录以及实现记录的删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table id="table6" class="caseTable">
            <tbody id="tbody6">
                <tr class="template repeat">
                    <td id="t1" class="btd">
                        商品名或通用名
                    </td>
                    <td id="t2" class="btd">
                        给药次数（次/日）
                    </td>
                    <td id="t3" class="btd">
                        每次用药量（/次）
                    </td>
                    <td id="t4" class="btd">
                        使用原因
                    </td>
                    <td id="t5" class="btd">
                        开始日期
                    </td>
                    <td id="t6" class="btd">
                        结束日期
                    </td>
                    <td id="t7" class="btd">
                        末次就诊时是否仍在使用
                    </td>
<td><a class="del" href="#"></a></td>
                </tr>
            </tbody>
        </table>

上面是模板表格

添加一个按钮

 <input id="btnAdd" class="btn3_mouseout" type="button" value="添  加" /></div>

添加js

 $("#tbody6>.template")
                //连同事件一起复制   
               .clone(true)
                //去除模板标记   
                .removeClass("template")
                //修改内部元素   
                .find(".content")
                .text("所要添加的信息"
                )
                .end()
                .find(".del")
                .text("删除")
                .end()
                //插入表格
                .appendTo($("#tbody6"))

删除事件

    //表格的删除按钮事件绑定   
            $("#tbody6 .del").click(function() {
                $(this).parents(".repeat").remove();
            });