`
kevin_wanwei
  • 浏览: 117591 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

jQueryJavaScriptAjaxXHTML框架 
阅读更多 
//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>

 

4
顶
0
踩
分享到：
| DTD和XML学习（3）属性声明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能，这对于创建交互式用户界面至关重要。 首先，让我们理解jQuery的核心概念。jQuery通过封装JavaScript API，使得选择元素、操作元素、添加事件监听器...

    jQuery实现表格内容的查找和隐藏

    本篇文章将详细讲解如何利用jQuery实现表格内容的查找和隐藏功能，这对于网页交互和用户体验提升至关重要。 首先，我们需要了解jQuery的基本用法。jQuery通过选择器（如$("#id")或$(".class")）来选取HTML元素，并...

    jQuery表格行展开隐藏代码.zip

    本项目“jQuery表格行展开隐藏代码”是利用jQuery与Bootstrap.js的结合，实现了一种动态的表格展示效果，尤其适用于数据展示和信息管理场景。 Bootstrap.js是由Twitter开发的一个流行的前端开发框架，它提供了丰富...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，使得实现这样的功能变得非常简便。本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先，我们需要理解jQuery的基本用法。...

    Repeater+Jquery实现表格列的隐藏，拖拉，位置交换

    列的隐藏功能通常通过监听用户的交互事件（如点击按钮），然后使用jQuery选择器找到对应的表格列，并改变其CSS样式（如设置display属性为none）来实现。这提供了用户自定义视图的能力，可以根据需要隐藏不重要的列。...

    jquery 操作表格

    虽然提供的文件没有直接提及插件，但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点，我们可以构建一个交互式的表格，不仅可以展示静态数据，还能响应用户操作，进行数据的动态更新和...

    自己动手实现JQUERY动态表格需要的拿去。 附件下载可以直接运行看效果!

    在这个"自己动手实现JQUERY动态表格"的项目中，我们可以深入理解如何利用jQuery来动态创建、修改和操作HTML表格。 首先，我们需要了解jQuery的基本用法。jQuery的核心函数`$`用于选择DOM元素，然后可以对这些元素...

    基于Jquery实现表格动态分页实现代码

    本示例是基于jQuery实现的表格动态分页，当用户点击分页图标时，页面会通过AJAX向服务器请求对应页数的数据。 首先，为了实现这个功能，我们需要引入必要的CSS和JavaScript库。在HTML中，我们添加了以下链接： ```...

    jquery实现table表格样式，表格展开，表格内容筛选

    1. **隐藏/显示内容**：jQuery可以用于控制元素的可见性，如`hide()`和`show()`方法，实现表格行或单元格的展开和折叠效果。 ```javascript $(".expandable").click(function() { $(this).nextUntil("tr:not(....

    jQuery实现表格模糊搜索代码.zip

    6. **异步加载**：如果表格数据是动态加载或从服务器获取的，可以结合jQuery的Ajax功能实现异步搜索。`$.ajax()`或`$.getJSON()`可以发送HTTP请求获取数据，然后在回调函数中处理搜索结果。 7. **用户体验**：为了...

    使用 Jquery 操作表格

    在实际应用中，结合这些文件，你可以学习如何用 jQuery 实现对表格的增删改查和交互功能。 总之，jQuery 使得在网页中操作表格变得简单且高效。通过掌握基本的 jQuery 方法和事件处理，你能够创建出功能强大、交互...

    jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip

    在网页设计和开发中，Bootstrap框架是一个非常流行的开源工具，它提供了一系列预先设计的组件，帮助开发者...通过学习和理解这个代码，开发者可以进一步提升自己的前端开发技能，为自己的项目带来更多的动态和交互性。

    jquery 隐藏显示行

    在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括隐藏和显示元素。...在实际开发中，结合条件判断和事件处理，我们可以创建出更加动态和交互性的网页应用。

    asp.net处理不规则表格 结合jquery处理不规则表格

    在jQuery中，可以使用`$('table').append('&lt;tr&gt;&lt;td&gt;新内容&lt;/td&gt;&lt;/tr&gt;')`来动态添加行，通过改变`&lt;tr&gt;`和`&lt;td&gt;`的数量来应对不规则表格的列变化。 6. **事件处理**： jQuery的事件监听器，如`click()`, `change()`...

    jquery实现无限极树表格菜单

    本文将深入探讨如何使用 jQuery 实现无限极树表格菜单，以及其背后的原理和技术。 ### 1. 核心概念 - **jQuery**：jQuery 是一个轻量级的 JavaScript 库，通过简化 DOM 操作、事件处理、动画和Ajax交互，使开发者...

    jQuery动态表格自定义分页代码.zip

    本资源"jQuery动态表格自定义分页代码.zip"提供了一种实现这一功能的方法，主要依赖于JavaScript库jQuery和CSS样式来创建美观且实用的动态表格和分页效果。 jQuery是一个轻量级的JavaScript库，它简化了HTML文档...

    基于jQuery的表格样式

    在创建或修改表格样式时，jQuery的`addClass()`、`removeClass()`和`toggleClass()`方法非常有用。`addClass()`可以添加一个或多个CSS类到选定的元素，从而改变其样式；`removeClass()`用于移除已添加的类；`...

    jquery表格展开合并

    总的来说，jQuery表格的展开合并功能为用户提供了一种交互式的数据查看方式，使得大量数据的展示更为清晰和直观。通过熟练掌握这些技巧，开发者可以提升网站的用户体验，并在项目中创造出更富表现力的界面。

    jquery grid表格插件

    同时，利用`hideCol`和`showCol`方法，可以实现列的动态隐藏和显示，满足不同场景下的需求。 其次，jQuery Grid支持列的拖动功能，这是其标签"jquery 表格列拖动"所指的内容。通过集成jQuery UI库中的draggable和...

    jQuery表格插件带分页控制代码.zip

    在这个“jQuery表格插件带分页控制代码.zip”压缩包中，我们聚焦于一个特定的应用场景：使用jQuery来实现带有分页功能的数据表格。这种技术在网页应用中非常常见，尤其在展示大量数据时，可以提高用户体验并优化页面...

Magicbox
Global site tag (gtag.js) - Google Analytics