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

最新推荐文章于 2020-06-25 10:05:16 发布

原创最新推荐文章于 2020-06-25 10:05:16 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Ajax #XHTML #框架 #ViewUI

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery实现网页表格的动态添加行与列隐藏功能，包括JavaScript代码详解及HTML结构展示。

//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[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="新增一行" onclick="addRow();" /></span> <span align="right"><input type="button" value="显示第3列" onclick="showAndHidden3();"/>&nbsp;<input type="button" value="显示第4列"onclick="showAndHidden4();" />&nbsp;<input type="button" value="显示第5列" onclick="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%"&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>