无为清净楼资源网

基于jQuery实现点击最后一行实现行自增效果的表格
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算是一个比较人性化的效果，可以免去一丝劳顿之苦，下面分享一段这样的代码。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title></title>
<style type="text/css">
table 
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td 
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child 
{
width:30px;
text-align:center;
}
table td input 
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus 
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.js">


以上代码实现了我们的要求，点击表格的最后一行，可以自动添加新行，下面介绍一下它的实现过程。


一.代码注释:


1.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。

2.var oTable = $("#count")，获取id属性值为count的对象，在这里就是表格对象。

3.iNum = 1，声明一个变量并赋初值为1，以后可以每增加一行就会+1作为行号。

4.eEle = ''，声明一个变量用来存储行对象。

5.oTable.on('click', function(e){})，为表格对象注册click事件处理函数。

6.var target = e.target，获取被点击的源对象。

7.oTr = $(target).closest('tr')，获取最近的tr祖辈元素。

8.f(oTr.index()==oTable.find('tr').last().index())，判断点击的是否是最后一行。

9.iNum++，iNum的值加1。

10.eEle = oTr.clone()，克隆当前行对象。

11.eEle.find('td').eq(0).text(iNum)，设置最后一行第一个单元格的值。

12.oTable.append(eEle)，为表格的最后添加行。


关于jQuery实现点击最后一行实现行自增效果的表格的全部内容先给大家介绍这么多，以上内容给大有注释，有不明白得地方可以参考下，非常感谢大家一直以来对网站的支持。
标签：
jquery行自增
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接