jQuery实现表格动态修改和隐藏实例_jq隐藏表格某一列资源-CSDN文库

共2个文件

js：1个

html：1个

jQuery实现表格动态修改和隐藏

4星 · 超过85%的资源需积分: 50 315 浏览量 2010-09-20 14:47:05 上传评论收藏 34KB RAR 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现表格动态修改和隐藏.rar （2个子文件）

jQuery实现表格动态修改和隐藏

jquery-1.3.1.js 119KB

jQuery实现表格动态修改和隐藏.html 3KB

<!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" /> <title>表格动态添加行和隐藏列</title> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript" src="js/trendTable.js"></script> </head> <body> <input type="button" value="新增一行" onclick="addRow();" /> <table id="tab" border="1"> <tbody id="trend"> </tbody> </table> <input type="button" value="显示第3列" onclick="showAndHidden3();"/> <input type="button" value="显示第4列"onclick="showAndHidden4();" /> <input type="button" value="显示第5列" onclick="showAndHidden5();"/> <script> //jQuery是一个非常好的JavaScript框架，用jQuery写的JavaScript代码会屏蔽不同浏览器之间的差异 //另外jQuery写Ajax代码非常方便，在其API中我们可以找到多种方法来实现Ajax功能。 //jQuery中所有的对象都被封装成了jQuery对象，这是我们写jQuery代码要注意的地方，这就意味它不再 //是一个document对象了。 function addRow(){ var tab=$("#trend");//获取表格的<tbody>对象 var row=$("<tr>");//创建一行 var col1=$("<td>");//创建列 var col2=$("<td>");//创建列 var col3=$("<td>");//创建列 var col4=$("<td>");//创建列 var col5=$("<td>");//创建列 var input1=$("<input type='text' value='1'/>");//创建输入框 var input2=$("<input type='text' value='2'/>");//创建输入框 var input3=$("<input type='text' value='3'/>");//创建输入框 var input4=$("<input type='text' value='4'/>");//创建输入框 var input5=$("<input type='text' value='5'/>");//创建输入框 col1.append(input1);//向列中添加输入框 col2.append(input2);//向列中添加输入框 col3.append(input3).attr("title","col3");//向列中添加输入框 col4.append(input4).attr("title","col4").hide();//向列中添加输入框，初始化是不可见 col5.append(input5).attr("title","col5").hide();//向列中添加输入框，初始化是不可见 row.append(col1);//将列添加到行中 row.append(col2);//将列添加到行中 row.append(col3);//将列添加到行中 row.append(col4);//将列添加到行中 row.append(col5);//将列添加到行中 tab.append(row);//将列添加到行中 } function showAndHidden3(){ $("td[title='col3']").show();//在jQuery中$("td[title='col3']")它实际上得到的是一个td集合对象 $("td[title='col4']").hide();//但在jQuery中会自动给集合中每个元素添加hide()方法，这不同于java程序 $("td[title='col5']").hide();//这里是通过元素属性获得元素对象的，方法非常简单（详情请查看jQuery API） } function showAndHidden4(){ $("td[title='col3']").hide(); $("td[title='col4']").show(); $("td[title='col5']").hide(); } function showAndHidden5(){ $("td[title='col3']").hide(); $("td[title='col4']").hide(); $("td[title='col5']").show(); } </script>

评论收藏

内容反馈