首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

超级简单的jquery操作表格方法

Posted in Javascript onDecember 15, 2014

本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下：

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

<script language="javascript" src="./jquery.js"></script>

<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">

<tr id="1"><td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td></tr>

<tr id="2"><td width="30%">11</td>

<td width="30%">22</td>

<td width="30%">33</td></tr>

</table>

<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%"> <tr id="4"><td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td>

</tr>

</table>

<input type="button" name="button" value="add" onclick="addtr('test');">

<input type="button" name="button" value="del" onclick="deltr('test');">

<script> //在id为test的table的最后增加一行

function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");

tr_id++; //alert(tr_id);

str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";

$('#'+id).append(str); } //删除id为test的table的最后一行

function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#'+tr_id).remove();

}

</script>

 
jQuery动态添加删除表格的行和列 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

var rowCount = 0;

var colCount = 2;  

function addRow(){ rowCount++; var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">内容'+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';

var tableHtml = $("#testTable tbody").html();

tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }

  function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }  

function addCol(){ colCount++; $("#testTable tr").each(function(){  

var trHtml = $(this).html(); trHtml += '<td onclick="delCol('+colCount+')">增加的td</td>';

$(this).html(trHtml);

});  

}  

function delCol(_id){   $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });

colCount--;

}  

function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");

$("td:eq("+_id+")",this).addClass("cl2"); }); }  

function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");

$("td:eq("+_id+")",this).addClass("cl1"); }); } </script>

<title>jquery操作表格测试</title>

</head>

<body>

<table id="testTable" border="1" width="500"> <tr>

<td>序号</td> <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>

<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>

</table>

<input type="button" value="添加行" onclick="addRow();"/>

<input type="button" value="添加列" onclick="addCol();"/>

</body>

jquery操作表格(添加/删除行、添加/删除列)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<title>jquery操作表格测试</title>

<script type="text/javascript">

function del(_id){ $("#testTable .tr_"+_id).html('');

var tableTr = $("#testTable .tr_"+_id).hide(); }

function addRow(){ var addRowTemplete = '<tr class="tr_'+tableCount+'">

<td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td>

<td class="cl1"><a href="javascript:void(0)" onclick=del('+tableCount+');>删除</a></td></tr>'; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){    var trHtml = "<td onclick='delCol("+colCount+")'>曾加的td</td>";    $(this).append(trHtml); }); } function delCol(_id){ $("#testTable tr").each(function(){    $("td:eq("+_id+")",this).hide(); }); }

</script> </head>

<body>

<table width="487" border="1" id="testTable"> <tr> <td onclick="delCol(0)">序号</td> <td onclick="delCol(1)">内容</td> <td onclick="delCol(2)">操作</td> </tr> </table> <p> <input type="button" name="Submit" value="添加行" onclick="addRow()" /> <input type="button" name="Submit2" value="添加列" onclick="addCol()"/> </p> </body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>

<meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" />

<meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女！我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>

<body>

<div id="wrap" class="wrap">

<div class="fatie" id="fatie">

<dl class="options">

<dd>选项<span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

</dl>

<p class="add_opt">

<span class="base_icon">添加更多选项</span>

</p>

</div>

</div>

</body>

<script type="text/javascript">

$(document).ready(function(){//投票选项增减控制

var fatie = $("#fatie");

var option = fatie.find(".options dd");

function list_again(){//选项重新排序

option.each(function(){

var i = $(this).index();

$(this).find("span").html(i+1);

})

}

fatie.find(".add_opt span").click(function(){//增加选项

fatie.find(".options").append('<dd>选项<span>i</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>');

option = fatie.find(".options dd");

list_again();

})

option.find("a").live("click",function(){//删除选项

$(this).parent().remove();

list_again();

})

})

</script>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

超级简单的jquery操作表格方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端的方法
Oct 01 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
node.js中的fs.link方法使用说明
Dec 15 #Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 #Javascript
jQuery中的编程范式详解
Dec 15 #Javascript
node.js中的fs.symlink方法使用说明
Dec 15 #Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 #Javascript
node.js中的fs.utimes方法使用说明
Dec 15 #Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 #Javascript
Hadoop(1) 表结构(1) 字段分割(1) Simhash(1) RecyclerView(1) REGEXP(1) 查询效率(1) TaiShan(1) 控制流(1) 九宫格(5)
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
百度工程师讲PHP函数的实现原理及性能分析（二）
2015/05/13 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
javascript实现打砖块小游戏（附完整源码）
2020/09/18 Javascript
js实现简易ATM功能
2020/10/27 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python同步两个文件夹下的内容
2019/08/29 Python
python脚本后台执行方式
2019/12/21 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
政法大学毕业生自荐信范文
2014/01/01 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
学生操行评语大全
2014/04/24 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
冰峪沟导游词
2015/02/09 职场文书
党员评议自我评价
2015/03/03 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年商场工作总结
2015/04/27 职场文书
劳务派遣管理制度（样本）
2019/08/23 职场文书
《狼王梦》读后感：可怜天下父母心
2019/11/01 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
MySQL批量更新不同表中的数据
2022/05/11 MySQL