技术文章
当前位置:首页 > jQuery技术文章 > jQuery实现表格元素动态创建功能

jQuery表格元素动态创建功能的实现方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:181

这篇文章主要知识点是关于jQuery表格元素动态创建、jQuery表格元素创建、jQuery表格元素、jQuery 绑定事件到动态创建的元素上的方法实例 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF出版:人民邮电出版社作者:(印) 乔希 (Joshi,V.) 著,
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jQuery实现表格元素动态创建功能

Jquery实现表格元素的动态创建,本质是通过构造一个Dom Node节点,并且拼接到表格的Dom树上的子叶位置。

HTML正文:

用户:<input type="text" id="user"/>
邮箱:<input type="text" id="mail"/>
手机:<input type="text" id="phone"/>
<br>
<button id="b1">添加</button><br>
<table border=1 id="table">
<tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
<tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
</table>

Javascript处理代码:

$("#b1").click(function(){
var $user=$("#user");
var $mail=$("#mail");
var $phone=$("#phone");

//组装对象
$tr=$("<tr></tr>");
$td1=$("<td></td>");
$td1.text($user.val());

$td2=$("<td></td>");
$td2.text($mail.val());

$td3=$("<td></td>");
$td3.text($phone.val());

$td4=$("<td></td>");

$href=$("<a></a>");
$href.attr("href","##");
$href.text("delete");
$td4.append($href);

$href.click(function(){
if(window.confirm("确定删除?")){
 //这里使用this表示当前事件绑定对象---? $(this)不能用$(href)代替,否则会认为每次都是最新对象,原有对象的行为不能保存
 $(this).parent().parent().remove(); 
}else{
 return;
}
});

$("#table").append($tr);
 $tr.append($td1);
 $tr.append($td2);
 $tr.append($td3);
 $tr.append($td4);
});

效果图:

jQuery实现表格元素动态创建功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

jQuery 绑定事件到动态创建的元素上的方法实例

在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本。

很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法。

Okay,想法很简单,逻辑似乎也无错。具体我们来看一下现实到底能不能实现。

1.页面构造个表单,放上几个输入框。代码看起来是这样子的。


<form action="/" method="post">
        <table>
            <tr>
                <td>Name:</td>
                <td>
                    <input type="text" name="name" value=" " />
                </td>
            </tr>
            <tr>
                <td>Age:</td>
                <td>
                    <input type="number" name="age" value=" " />
                </td>
            </tr>
            <tr>
                <td>Tel.:</td>
                <td>
                    <input type="tel" name="tel" value=" " />
                </td>
            </tr>
            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="email" name="email" value=" " />
                </td>
            </tr>
            <tr>
                <td>Birth:</td>
                <td>
                    <input type="datetime" name="birthday" value=" " />
                </td>
            </tr>
        </table>
    </form>

出来的界面在Chromium里差不多是这个样子的:
jQuery 绑定事件到动态创建的元素上的方法实例

2.然后开始写我们的JavaScript代码来实现单击选中框内的文本,根据之前的想法,实现起来差不多应该是下面这个样子:


<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                $(this).select();
            })
        })
  </script>

3.然后再去页面小试一下,看效果出来没有。尝试之后发现,差不多算是成功了一半。什么情况叫?如果此刻你也跟着写了代码,你会发现,间单击输入框时,框中文本会闪烁。再进一步才会发现,只有当鼠标按下不放,输入框内文本才是保持选中状态,是我们预期的。当松开时选择效果消失。无尽惆怅!
jQuery 绑定事件到动态创建的元素上的方法实例

而且这还只是仅仅在Chromium中的情况,在IE中更为奇葩,连一丁点选择的效果都没有绽放出来。直接把代码无视了。

jQuery 绑定事件到动态创建的元素上的方法实例

对于火狐,水壶(如果你还不知道它的存在的话:火狐近亲,Mozilla 官方承认的64位高效版本火狐变种版本)我已经无力去测了。

下面直接给出经过Google之后找到的能在全浏览器中工作的代码:


<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            })
        })
 </script>

而关于上面这段能够正常工作的代码,还有一点神奇之处。那就是我和大家可能都觉得


var input = $(this);
                setTimeout(function () {
                    input.select();
                });



                var input =$(this);
                setTimeout(function () {
                    $(this).select();
                });

这两种写法应该是完全一样的代码吧,所以后者也应该能够达到预期的效果才对。但事实上换成第二种后,效果不见了!根本无法让文本自动选中!!

这是一般人所无法理解的高度。

Okay,回归继续看我们的输入框现在怎么样了。现在只要输入框中有文本,随便点一下就自动选中且松开鼠标后不反弹。很好,要的就是这种效果。

 

下面,才是本文的真正主题,如何将特性,或者说事件处理器,绑定到动态创建的页面元素上。

接着上面这个功能讲。上面的代码也许解决了一个表单页面的需求,在且仅仅是在这个页面,输入框具备这种获得焦点后自动将文本选中的特性。或者说拥有我们代码中所绑定到输入框focus事件上的处理器,当然,这个处理器就是选择文本。

如果说上面的说法有点令人头晕找不到北,下面我将用平生最为直白的语言再次阐述同一观点:假如其他页面也有输入框,是不是每个页面都去写一段相同的代码来实现这样的效果。

或者说同样是在当前页面,当用户填完相应资料后,我们再动态生成一些输入框,而这些后来生成的输入框如何也拥有获得焦点选中文本的功能。

为了演示,我们检测如果用户输入了Name,我们再在下面创建一个输入框可以输入昵称。可以预见得到,这个后来通过JavaScript代码插入到DOM中的输入框其中不会有其他输入框一样的效果的。因为我们使文本自动被选中的代码是在页面加载时执行的,而页面加载时这个后来插入的输入框还不存在呢。

下面是新加的对name输入框监听的代码:


$("input[name='name']").change(function () {
                $("tr").first().append(' <tr>' +
                                          '<td>Nick name:</td>'+
                                           '<td>'+
                                                '<input type="text" name="nickname" value=" " />'+
                                           '</td>'+
                                        '</tr>')
            })

下面到页面去测试一下,在Name中随便输入点什么吧。并且测试生成的输入框是不能将文本自动选中的。

jQuery 绑定事件到动态创建的元素上的方法实例

下面给出使动态创建的元素得到之前绑定的事件处理器的方法:


$("body").on('focus', "input", function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            });

这个方法未免有点取巧,但也是我觉得目前为止所知道的比较好的办法。因为jQuery1.9之前其实是有个live()函数专门来做这样类似的工作的,它可以将事件处理器绑定到未来未还未被创建的元素身上,但后来随着jQuery版本的升级,不提倡用这个live()方法了。既然不提倡了,自然有它的理由我也就不细究了,就像之前我细究了一下jQuery为什么废除了检测浏览器相关的函数一样。

如果我们将上面的方法写到网站的母版页当中,那么就不必在每个有输入框的页面都写相同的代码来实现了,同时对于后来动态创建的元素也都应用上了效果。

上面关于输入框的例子只是为了演示,当然不局限于这个例子,这样处理动态创建元素的需求还是很常见的,至少我在项目中都遇到过几次了,在不同的情形下。比如在呈现给权限不够的用户的页面中,有些按扭需要禁用,但用户是可以点击添加来增加一行,而每行都会有删除修改按扭,这时候可以将disable应用到一个表格中新增加的行中的按扭上。

行到水穷处,坐看云起时

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery点击元素后滚动条滚、 jQuery中Find选择器的用法和、 同域jQuery(跨)iframe操作DO、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery中Find选择器的用法和实例

下一篇:解决IE8下jQuery修改png图片透明度时出现的黑边的问题

展开 +

收起 -

jQuery实例 相关电子书
学习笔记
网友NO.997903

jquery实现表格中点击相应行变色功能效果【实例代码】

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于: !DOCTYPE htmlhtml lang="en" xmlns="http://www.w3.org/1999/xhtml"head meta charset="utf-8" / title/title link href="css/style.css" rel="stylesheet" type="text/css" / script src="jquery-1.3.2.min.js"/script script $(function () { $('tbodytr').click(function () { $(this).addClass('selected') //为选中项添加高亮 .siblings().removeClass('selected')//去除其他项的高亮形式 .end(); }); }); /script/headbody table thead trth姓名/thth性别/thth暂住地/th/tr /thead tbody trtd张三/tdtd男/tdtd浙江宁波/td/tr trtd张三/tdtd男/tdtd浙江宁波/td/tr trtd张三/tdtd男/tdtd浙江宁波/td/tr trtd张三/tdtd男/tdtd浙江宁波/td/tr trtd张三/tdtd男/tdtd浙江宁波/td/tr /tbody /table/body/html 以上这篇jquery实现表格中点击相应行变色功能效果【实例代码】就是小编分享给大家的全……

网友NO.597601

jQuery实现的表格展开伸缩效果实例

本文实例讲述了jQuery实现的表格展开伸缩效果。分享给大家供大家参考,具体如下: htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlestyletable { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} .parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;} /stylescript src="jquery-1.7.2.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function(){ $('tr.parent').click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮 .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行 });})/script/headbodytable thead tr th姓名/th th性别/th th暂住地/th /tr /thead tbody tr class="parent" id="row_01" td colspan="3"前……

网友NO.138097

jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加、删除表格功能。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" titlewww.jb51.net 码农之家/title style * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } td a.get { text-decoration: none; } a.del:hover { text-decoration: underline; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } .btnAdd { width: 110px; height: 30px; font-size: 20px; font-weight: bold; } .form-item { height: 100%; position: relative; padding-left: 100px; padding-right: 20px; margin-bottom: 34px; line-height: 36px; } ……

网友NO.723630

jquery动态增加删除表格行的小例子

script src="jquery/jquery-1.3.1.js"/script style type="text/css" body{background:#FFFFFF;} /style /head body script $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值,这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").click(function(){ if(count fin_count) //点击时候,如果当前的数字小于递增结束的条件 { $("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 $("tr:last td input:first").val(++count); //改变添加的行的ID值。 } }); }); function deltr(){ var length=$("tr").length; if(length=2){ alert("至少保留一行"); }else{ $("tr:last").remove(); } } /script input type="button" id="btn_addtr" value="增行" table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0" tr td height="30" align="center" bgcolor="#CCCCCC"ID/td td align="center" bgcolor="#CCCCCC"Username/td td align="center" bgcolor="#CCCCCC"User……

网友NO.923483

Jquery 动态生成表格示例代码

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title动态创建表格/title script type="text/javascript" src="Scripts/jquery-1.3.2.js"/script script type="text/javascript" function CreateTable(rowCount,cellCount) { var table=$("table border=\"1\""); table.appendTo($("#createtable")); for(var i=0;irowCount;i++) { var tr=$("tr/tr"); tr.appendTo(table); for(var j=0;jcellCount;j++) { var td=$("td"+i*j+"/td"); td.appendTo(tr); } } trend.appendTo(table); $("#createtable").append("/table"); } /script /head body input type="button" value="添加表格" onClick="CreateTable(5,6)" input type="button" value="添加行" div id="createtable"/div div id="createrow"/div /body /html ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息