jQuery实现表格动态修改和隐藏
//jQuery是一个非常好的JavaScript框架，用jQuery写的JavaScript代码会屏蔽不同浏览器之间的差异//另外jQuery写Ajax代码非常方便，在其API中我们可以找到多种方法来实现Ajax功能。//jQuery中所有的对象都被封装成了jQuery对象，这是我们写jQuery代码要注意的地方，这就意味它不再//是一个document对象了。var i=0;var j=4;var k=3;function addRow(){i++;var tab=$("#trend");//获取表格的<tbody>对象var row=$("<tr>");//创建一行row.attr("id","tr"+i);var col1=$("<td>");//创建列var col2=$("<td>");//创建列var col3=$("<td>");//创建列var col4=$("<td>");//创建列var col5=$("<td>");//创建列var col6=$("<td>");//创建列var img=$("<img src='images/del.png'>");var alink=$("<a href='#' onclick='delRow("+i+");'></a>");var input1=$("<input type='text' value='1'/>");//创建输入框var input2=$("<input type='text' value='2'/>");//创建输入框var input3=$("<input type='text' value='第三列'/>");//创建输入框var input4=$("<input type='text' value='第四列'/>");//创建输入框var input5=$("<input type='text' value='第五列'/>");//创建输入框alink.append(img);col6.append(alink);col1.append(input1);//向列中添加输入框col2.append(input2);//向列中添加输入框if(k==3){col3.append(input3).attr("title","col3");//向列中添加输入框col4.append(input4).attr("title","col4").hide();//向列中添加输入框，初始化是不可见col5.append(input5).attr("title","col5").hide();//向列中添加输入框，初始化是不可见}else if(k==4){col3.append(input3).attr("title","col3").hide();//向列中添加输入框col4.append(input4).attr("title","col4");//向列中添加输入框，初始化是不可见col5.append(input5).attr("title","col5").hide();//向列中添加输入框，初始化是不可见}else if(k==5){col3.append(input3).attr("title","col3").hide();//向列中添加输入框col4.append(input4).attr("title","col4").hide();//向列中添加输入框，初始化是不可见col5.append(input5).attr("title","col5");//向列中添加输入框，初始化是不可见}row.append(col1);//将列添加到行中row.append(col2);//将列添加到行中row.append(col3);//将列添加到行中row.append(col4);//将列添加到行中row.append(col5);//将列添加到行中row.append(col6);//将列添加到行中if(i==1){$('#space0').after(row);}else{tab.append(row);//将列添加到行中}delOldRow(i);}function showAndHidden3(){k=3;$("td").show();//在jQuery中$("td")它实际上得到的是一个td集合对象$("td").hide();//但在jQuery中会自动给集合中每个元素添加hide()方法，这不同于java程序$("td").hide();//这里是通过元素属性获得元素对象的，方法非常简单（详情请查看jQuery API）}function showAndHidden4(){k=4;$("td").hide();$("td").show();$("td").hide();}function showAndHidden5(){k=5;$("td").hide();$("td").hide();$("td").show();}function delRow(rowid){$("#tr"+rowid).remove(); }function delOldRow(rowid){if(rowid<=j){$("#space"+rowid).remove();}}<!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><span align="left"><input type="button" value="新增一行"/></span> <span align="right"><input type="button" value="显示第3列" />&nbsp;<input type="button" value="显示第4列" />&nbsp;<input type="button" value="显示第5列" /></span><table id="tab" border="1"><tbody id="trend"><tr id="space0"><td width="16%">产品主数据</td><td width="16%">产品名称</td><td width="16%" title="col3" >产品价格</td><td width="16%" title="col4" style="display:none">仓库名称</td><td width="16%" title="col5" style="display:none">仓库代码</td><td width="16%" >操作</td></tr><tr id="space1"><td width="16%"&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%">&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%" title="col3" >&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%" title="col4" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;3</td><td width="16%" title="col5" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;4</td><td width="16%" >&nbsp;&nbsp;&nbsp;&nbsp;</td></tr><tr id="space2"><td width="16%">&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%">&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%" title="col3" >&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="16%" title="col4" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;3</td><td width="16%" title="col5" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;4</td><td width="16%" >&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></tbody></table></body></html>
页:
[1]