jquery动态添加表格

最新推荐文章于 2022-03-31 19:04:52 发布
最新推荐文章于 2022-03-31 19:04:52 发布
阅读量349 收藏
点赞数 2
分类专栏： JQuery 文章标签： jquery input function class stylesheet button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengyuanhuan/article/details/7679254
版权
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link href="App_Files/CSS/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tb .td{
            
            text-align: center;
            font-weight: bold;
            background-color: #6699FF;
            color: #FFFFFF;
            border:1px solid #000;
            vertical-align: middle;
        }
    </style>
    
    <script type="text/javascript">
        $(document).ready(function() {
            //隐藏模板tr
            $("#tb tr").eq(2).hide();
            var i = 0;
            $("#BtAdd").click(function() {
　　　　　//复制一行
                var tr = $("#tb tr").eq(2).clone();
                tr.find("td").get(0).innerHTML = ++i;
                tr.show();
                tr.appendTo("#tb");
            });
            $("#BtDel").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    if ($(this).find("#CK").get(0).checked == true) {
                        $(this).remove();
                    }
                });
                i = 0;
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("td").get(0).innerHTML = ++i;
                });
                $("#CKA").attr("checked", false);
            });
            $("#CKA").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <table id="tb" style="border:1px solid #000;">
           <tr>
                <td colspan="10" style="text-align:right" height="25">
                    <input id="BtAdd" type="button" value="添加" />&nbsp;<input id="BtDel" type="button" value="删除"  />
                     <input type="radio" name=""/>
                    
                    
                    </td>
            </tr>
            <tr>
                <td class="td" style="width:25px;"></td>
                <td class="td" style="width:25px;">
                    <input id="CKA" name="CKA" type="checkbox"/></td>
                <td class="td" style="width:20%;">
                    字段名</td>
                <td class="td" style="width:20%;">
                    名称</td>
                <td class="td" style="width:15%;">
                    数据类型</td>
                <td class="td" style="width:40px;">
                    主键</td>
                <td class="td" style="width:40px;">
                    必填</td>
                <td class="td" style="width:20%;">
                    长度</td>
                <td class="td" style="width:40px;">
                    有效</td>
                <td class="td" style="width:80px;">
                    排序</td>
            </tr>
            <tr>
                <td style="text-align: center"></td>
                <td style="text-align: center">
                    <input id="CK" type="checkbox" name="CK"/></td>
                <td style="text-align: center">
                    <input id="TName" type="text" name="TName" /></td>
                <td style="text-align: center">
                    <input id="TRm" type="text" name="TRm" /></td>
                <td style="text-align: center">
                    <select id="SType" name="SType" style=" width:100px;">
                        <option>1</option>
                        <option>2</option>
                    </select></td>
                <td style="text-align: center">
                    <input id="CKIsPR" type="checkbox" name="CKIsPR"/></td>
                <td style="text-align: center">
                    <input id="CKIsNull" type="checkbox" name="CKIsNull"/></td>
                <td style="text-align: center">
                    <input id="TLen" type="text" size="10" name="TLen" /></td>
                <td style="text-align: center">
                    <input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse"/></td>
                <td style="text-align: center">
                    <input id="TxtSortNO" type="text" size="4" name="TxtSortNO" /></td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>


泡泡谜
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
JQuery动态添加和删除表格行的方法
10-24
主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery实现表格动态添加
yaohong
11-09 288
//点击追加触发$(function(){$("#button").click(function(){var div_ = $("#sel").val();var context = $("#context").val();append(div_,context);//$("#tab tr:not(:first)").remove();//$("#tab tbody").empty();...
jQuery完成动态表格
lf1949的博客
03-31 1743
jQuery完成动态表格成果要求代码展示 成果要求 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery/jquery-3.6.0.min.js"></script> <script> $(funct
jquery动态表格，动态添加表格行
weixin_30852367的博客
05-09 502
效果图： Html： <html> <head> <title>jquery表格操作</title> <scriptlanguage="javascript"src="jquery.table.tr.js"></script> <styletype="te...
动态添加表格数据（jQuery、Vue）
lcb9354的博客
03-21 1228
动态添加表格数据（jQuery、Vue） 一、jQuery动态插入表格数据 二、Vue动态插入表格数据的简单操作 一、jQuery动态插入表格数据 1、效果图 2、参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &...
jQuery+ajax实现动态添加表格tr td功能示例
12-11
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现动态添加表格的`<tr>`和`<td>`功能。这个功能通常用于网页上的数据展示，特别是在用户交互时需要实时更新表格内容的情况，例如筛选、搜索或加载更多数据。 ...
Jquery 动态生成表格示例代码
10-26
添加表格" onClick="CreateTable(5,6)"> 添加行"> <div id="createtable"></div> <div id="createrow"></div> ``` 然而，示例代码中没有实现“添加行”的功能。要实现这一功能，可以添加一个新函数，例如`AddRow`，...
jQuery动态生成Bootstrap表格
10-21
最后，`createTable`函数在每次迭代后调用`create_tbody()`，这可能是为了进一步扩展表格内容，但代码没有提供此函数的实现，因此这里我们只能假设它会继续添加表格行。 总结来说，这个示例展示了如何使用jQuery和...
jQuery+Ajax动态添加表格
qq_46601680的博客
01-06 2317
最近做课设，涉及到前端知识，设计的项目需要用jQuery动态添加删除html中table的tr和td，试遍了网上的代码都无济于事，无奈只能自己编写。先展示运行结果： 详细代码如下： dao层代码： //查看所有用户 public List<User> findAllUser() throws Exception { Connection conn = DBUtil.getConnection(); String sql = "select * from ...
jquery实现动态生成表格
11-13
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
使用jQuery实现动态添加、删除表格
07-16
使用jQuery实现动态添加、删除表格,向后台提交时更方便。
jquery入门之动态表格---动态添加删除一行
08-19
jquery入门之动态表格---动态添加一行
jQuery实现表单动态添加数据并提交的方法
10-18
主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
基于jQuery实现表格数据的动态添加与统计的代码
10-28
使用jQuery可以大大减轻工作量,在实际开发中,使用了jQuery的clone(true)函数,该函数可以创建一个jQury对象的副本,并且参数为true时,可以复制该元素的所有事件处理函数。
jQuery动态添加表格
summer2018
11-10 567
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   "http://www.w3.org/1999/xhtml">      "Content-Type" content="text/html; charset=utf-8" />   动态
jQuery之动态为表格添加数据
热门推荐
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
js或者jquery动态添加表格
new_buff_007的博客
12-11 330
弄了好长时间，一定要注意方法，灵活使用原生js var tb = document.createElement("table");     tb.setAttribute("id","tab");     /*创建表头*/     var tb_tr0 = document.createElement("th");     for(var i = 0; i &lt; 6; i++){      ...
jquery 动态添加表格
最新发布
05-10
可以使用jQuery的`append()`方法动态添加表格。 首先，在HTML文件中添加一个空的表格： ```html <th>Column 1 <th>Column 2 <th>Column 3 ``` 然后，在jQuery中使用`append()`方法添加表格行： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值