jquery 中table动态添加行和删除列操作

最新推荐文章于 2026-06-12 13:08:05 发布

原创最新推荐文章于 2026-06-12 13:08:05 发布 · 1.6w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JSP

本文介绍如何使用HTML创建表格，并提供动态添加及删除行的方法。包括基本表格结构定义、JavaScript动态行增删实现。

该文章已生成可运行项目，

1.简单的table使用定义

<table class="table table-bordered table-hover" style="text-align: center;" id="Result">
                <thead>
                    <tr>
                        <!-- <th width="10%"><input type="checkbox" id="checkAll"/></th> -->
                        <th width="10%" class="text-center">活动名称</th>
                        <th width="10%" class="text-center">活动媒体</th>
                        <th width="20%" class="text-center">开始时间</th>
                        <th width="10%" class="text-center">结束时间</th>
                        <th width="15%" class="text-center">活动状态</th>
                        <th width="25%" class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>222</td>
                        <td>222</td>
                        <td>222</td>
                        <td>222</td>
                        <td>222</td>
                        <td><a href="">操作</a></td>
                    </tr>
                </tbody>
            </table>

2.动态添加行

var result="";
        result +="<tr>";
        result +="<td>eeeee</td>";
        result +="<td>eeeee</td>";
        result +="<td>eeeee</td>";
        result +="<td>eeeee</td>";
        result +="<td>eeeee</td>";
        result +="<td><a href=\"javascript:void(0)\" onclick=\"removeTr(this)\">删除</a></td>";
        result +="</tr>";
        $("#Result tbody").append(result);

通过调用table中的append方法添加一行；

3.动态删除行

function removeTr(obj) {
        // alert('ssss');
        var tr= $(obj).parent().parent();
        tr.remove();
    }

定义超链接点击删除操作，动态获取a>td>tr对象，然后调用remove方法移除当前的tr对象

本文章已经生成可运行项目

标签

#table #jquery #tr #移除