//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='#' οnclick='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[title='col3']").show();//在jQuery中$("td[title='col3']")它实际上得到的是一个td集合对象 $("td[title='col4']").hide();//但在jQuery中会自动给集合中每个元素添加hide()方法,这不同于java程序 $("td[title='col5']").hide();//这里是通过元素属性获得元素对象的,方法非常简单(详情请查看jQuery API) } function showAndHidden4(){ k=4; $("td[title='col3']").hide(); $("td[title='col4']").show(); $("td[title='col5']").hide(); } function showAndHidden5(){ k=5; $("td[title='col3']").hide(); $("td[title='col4']").hide(); $("td[title='col5']").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="新增一行" οnclick="addRow();" /></span> <span align="right"><input type="button" value="显示第3列" οnclick="showAndHidden3();"/> <input type="button" value="显示第4列"οnclick="showAndHidden4();" /> <input type="button" value="显示第5列" οnclick="showAndHidden5();"/></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%" </td>
<td width="16%"> </td>
<td width="16%" title="col3" > </td>
<td width="16%" title="col4" style="display:none"> 3</td>
<td width="16%" title="col5" style="display:none"> 4</td>
<td width="16%" > </td>
</tr>
<tr id="space2">
<td width="16%"> </td>
<td width="16%"> </td>
<td width="16%" title="col3" > </td>
<td width="16%" title="col4" style="display:none"> 3</td>
<td width="16%" title="col5" style="display:none"> 4</td>
<td width="16%" > </td>
</tr>
</tbody>
</table>
</body>
</html>