`

table的简单操作

    博客分类:
  • HTML
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>table的简单操作</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<style type="text/css">
/** table style **/
.table {
	border: 1px solid #E0E0E0;
	width: 100%;
	font-size: 9pt;
	border-collapse: collapse;
	collsping: 0;
	cellsping: 0;
}

.tdHead {
	border: 1px solid #E0E0E0;
	border-top: -1px solid #70A6F6;
	background: #70A6F6;
	height: 26px;
	text-align: center;
	font-size: 10pt;
	font-weight: normal;
	color: #000000;
	vertical-align: middle;
	cursor: hand;
	filter: progid :     DXImageTransform.Microsoft.Gradient (    
		GradientType =     0, StartColorStr =     #70A6F6, EndColorStr =    
		#FFFFFF );
}

.tdHeadNo {
	border: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	background: #3CA03C;
	width: 40px;
	text-align: center;
	font-size: 10pt;
	font-weight: normal;
	color: #000000;
	vertical-align: middle;
	filter: progid :     DXImageTransform.Microsoft.Gradient (    
		GradientType =     0, StartColorStr =     #70A6F6, EndColorStr =    
		#FFFFFF );
}

.tdNo {
	border: 1px solid #E0E0E0;
	border-bottom: -1px solid #E0E0E0;
	background: #70A6F6;
	width: 40px;
	height: 22px;
	text-align: center;
	font-size: 9pt;
	font-weight: nomal;
	color: #ffffff;
	vertical-align: middle;
	filter: progid :     DXImageTransform.Microsoft.Gradient (    
		GradientType =     1, StartColorStr =     #70A6F6, EndColorStr =    
		#FFFFFF );
}

.tdContent {
	border: 1px solid #E0E0E0;
	border-right: -1px solid #E0E0E0;
	text-align: left;
	font-size: 9pt;
	color: #000000;
	vertical-align: middle;
	height: 22px;
	CURSOR: hand;
}

.tdSelect {
	border: 1px solid #E0E0E0;
	border-right: -1px solid #E0E0E0;
	background: #DDDDFF;
	text-align: center;
	font-size: 9pt;
	color: #0000FF;
	font-weight: normal;
	vertical-align: middle;
	filter: progid :     DXImageTransform.Microsoft.Gradient (    
		GradientType =     0, StartColorStr =     #FFFFFF, EndColorStr =    
		#DDDDFF );
	height: 22px;
	CURSOR: hand;
}
/** table style **/
</style>
		<script type="text/javascript">
		var selectRow = null;
		function onSelect(el){
			var tb = document.getElementById("table");
			var row = null; 
			for(var i=1;i<tb.rows.length;i++){
				row = tb.rows[i];
				for(var j=0;j<row.cells.length;j++){
					tb.rows[i].cells[j].className = "tdContent";
				}
			}
			row = el.parentNode;
			for(var i=0;i<row.cells.length;i++){
				row.cells[i].className = "tdSelect";
			}
			selectRow =  row;
		}
		function dbclick(obj){
			onSelect(obj.cells[0]);
			
			var id = selectRow.getAttribute("id");
			alert(id);
		}
		
	</script>
	</head>
	<body>
		<table class="table" border="1" style="width: 100%;" id="table">
			<tr>
				<td class="tdHeadNo" id="no" style="width: 4%" nowrap="nowrap">
					序号
				</td>
				<td class="tdHead" id="FareBillCode" style="width: 10%;"
					nowrap="nowrap">
					单据编号
				</td>
				<td class="tdHead" id="DeptName" style="width: 10%;" nowrap="nowrap">
					部门名称
				</td>
			</tr>
			<tr id="35000000000001889" ondblclick="dbclick(this)">
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					1
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					200904200000
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					个体公司
				</td>
			</tr>
			<tr id="35000000000001889" ondblclick="dbclick(this)">
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					2
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					200904250002
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					股份公司
				</td>
			</tr>
			<tr id="35000000000001889" ondblclick="dbclick(this)">
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					3
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					200904200055
				</td>
				<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
					财务公司
				</td>
			</tr>
		</table>
	</body>
</html>

分享到:
评论

相关推荐

    vxe-table vue table 表格组件功能

    最后,为了展示vxe-table的具体应用,文档中提供了一个简单的使用示例。开发者可以利用此示例快速搭建一个基础的表格,并根据需要进行扩展和自定义。整个示例涉及了vxe-table的核心属性和方法,包括如何绑定数据源、...

    简单网页table布局

    在这个平台上,table布局可能被用于显示数据、进行操作等,通过JavaScript提供动态交互,如筛选、排序或者编辑表格内的数据。 总结来说,"简单网页table布局"涉及HTML创建表格结构,CSS进行样式设计,以及...

    Bootstrap Table两个table间行数据拖拽

    在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中,我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据,这种功能在数据管理、比较或重新排序场景中非常实用。 首先,我们...

    js操作table导出excel

    本文将深入探讨如何使用JavaScript、jQuery和...这里我们主要介绍`FileSaver.js`,因为它更简单易用。 1. **引入依赖**:首先,你需要在项目中引入`FileSaver.js`库。你可以通过CDN链接或者下载后引入本地。 ```html ...

    BootStrapTable实现增删改查

    BootstrapTable是一种基于Bootstrap框架的前端数据展示插件,它提供了丰富的功能,如表格排序、分页、筛选等,使得在网页上创建交互式表格变得简单。在MVC(Model-View-Controller)架构中,结合C#后端,Bootstrap...

    用于layui table 自定义列

    3. 调用table模块,设置表格的配置项,如数据源、列配置、操作列等。 4. 渲染表格。 二、自定义列 在layui table中,自定义列主要是通过设置`cols`参数来实现的。`cols`是一个二维数组,每个子数组代表表格的一行...

    安卓使用smartTable生成表格

    SmartTable 是一个优秀的库,它为安卓开发者提供了一种简单高效的方式来创建、编辑和展示表格,同时支持Excel文件的导入导出。下面将详细阐述如何在安卓应用中使用SmartTable来生成表格,并涉及与Excel文件的交互。 ...

    ElementUI transfer+table.zip

    ElementUI 是一个流行的前端组件库,它为开发者提供了丰富的UI组件,使得构建用户界面变得更为简单和高效。在"ElementUI transfer+table.zip"这个压缩包中,包含的主要是两个Vue组件:`transfer+table.vue`和`...

    bootstrap-table案例

    Bootstrap Table是一款基于Bootstrap框架的开源前端插件,用于在网页上展示数据并提供各种操作功能。这个案例主要展示了如何在项目中使用Bootstrap Table实现查询功能,但不包括增、删、改操作。以下是对Bootstrap ...

    bootstraptable冻结列例子.doc

    总结来说,Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数,使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数,你可以根据需求定制出...

    全面的table操作解压即可使用

    在这个“全面的table操作解压即可使用”的压缩包中,我们可以期待找到一系列关于如何使用jQuery来增强HTML表格功能的代码示例和教程。 首先,`table排序`是网页表格常用的功能之一。在jQuery中,可以使用插件如...

    XPTable-winform很强大的表格控件

    7. **数据绑定和数据源支持**:XPTable控件可以方便地绑定到各种数据源,如数组、集合、数据库查询结果等,使得数据展示和操作变得更加简单。 8. **扩展性和插件机制**:XPTable提供了丰富的API和扩展接口,开发者...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    以下是一个简单的使用示例: ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" href="bootstrap-table.css"&gt; &lt;table id="table" data-toggle="table"&gt; &lt;th data-field="id" data-editable="true"&gt;ID...

    bootstrap table editable js

    这个插件极大地提高了用户在操作大量数据时的效率和体验。 在实际使用中,这三个文件需要一起引入到HTML页面中,通过设置适当的JavaScript选项和HTML标记,可以轻松创建具有编辑功能的表格。开发者可以根据需求调整...

    mootools tree and table

    总的来说,MooTools为开发者提供了强大而灵活的工具,使得在Web应用中实现tree和table控件变得简单。理解并掌握这些组件的使用方法,可以帮助我们构建更高效、更用户友好的界面,提升网站或应用的用户体验。在实践中...

    【原创】JS操作table--XTable类

    低调发布,因为是小样版本,集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善,引入ajax元素。尽请期待。 demo地址: ...

    免费下载bootstrap_table参考代码.rar

    Bootstrap Table 提供了一套灵活、响应式的表格解决方案,使得在网页上展示结构化数据变得简单易行。其核心特性包括: 1. **响应式设计**:Bootstrap Table 自带响应式布局,确保在不同设备和屏幕尺寸上都能良好...

    bootstrap集成table样式的总结

    在Bootstrap中,可以通过添加`.table-actions`类来创建一个操作列,通常用于显示编辑、删除等操作: ```html &lt;table class="table"&gt; 张三 &lt;td&gt;25 北京 &lt;td class="table-actions"&gt; 编辑 删除 &lt;!-- ...

    LayUI table 刷新页面不重置页码

    LayUI table组件提供了一种方便的方式来展示和操作数据,包括分页、筛选和刷新等。然而,当用户刷新表格内容时,有时我们希望页码能够重置回第一页,但默认情况下,LayUI table的刷新功能并不会自动重置页码。这个...

Global site tag (gtag.js) - Google Analytics