<!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的具体应用，文档中提供了一个简单的使用示例。开发者可以利用此示例快速搭建一个基础的表格，并根据需要进行扩展和自定义。整个示例涉及了vxe-table的核心属性和方法，包括如何绑定数据源、...
在这个平台上，table布局可能被用于显示数据、进行操作等，通过JavaScript提供动态交互，如筛选、排序或者编辑表格内的数据。 总结来说，"简单网页table布局"涉及HTML创建表格结构，CSS进行样式设计，以及...
在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中，我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据，这种功能在数据管理、比较或重新排序场景中非常实用。 首先，我们...
本文将深入探讨如何使用JavaScript、jQuery和...这里我们主要介绍`FileSaver.js`，因为它更简单易用。 1. **引入依赖**：首先，你需要在项目中引入`FileSaver.js`库。你可以通过CDN链接或者下载后引入本地。 ```html ...
BootstrapTable是一种基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能，如表格排序、分页、筛选等，使得在网页上创建交互式表格变得简单。在MVC（Model-View-Controller）架构中，结合C#后端，Bootstrap...
3. 调用table模块，设置表格的配置项，如数据源、列配置、操作列等。 4. 渲染表格。 二、自定义列 在layui table中，自定义列主要是通过设置`cols`参数来实现的。`cols`是一个二维数组，每个子数组代表表格的一行...
SmartTable 是一个优秀的库，它为安卓开发者提供了一种简单高效的方式来创建、编辑和展示表格，同时支持Excel文件的导入导出。下面将详细阐述如何在安卓应用中使用SmartTable来生成表格，并涉及与Excel文件的交互。 ...
ElementUI 是一个流行的前端组件库，它为开发者提供了丰富的UI组件，使得构建用户界面变得更为简单和高效。在"ElementUI transfer+table.zip"这个压缩包中，包含的主要是两个Vue组件：`transfer+table.vue`和`...
Bootstrap Table是一款基于Bootstrap框架的开源前端插件，用于在网页上展示数据并提供各种操作功能。这个案例主要展示了如何在项目中使用Bootstrap Table实现查询功能，但不包括增、删、改操作。以下是对Bootstrap ...
总结来说，Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数，使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数，你可以根据需求定制出...
在这个“全面的table操作解压即可使用”的压缩包中，我们可以期待找到一系列关于如何使用jQuery来增强HTML表格功能的代码示例和教程。 首先，`table排序`是网页表格常用的功能之一。在jQuery中，可以使用插件如...
7. **数据绑定和数据源支持**：XPTable控件可以方便地绑定到各种数据源，如数组、集合、数据库查询结果等，使得数据展示和操作变得更加简单。 8. **扩展性和插件机制**：XPTable提供了丰富的API和扩展接口，开发者...
以下是一个简单的使用示例： ```html <!DOCTYPE html> <link rel="stylesheet" href="bootstrap-table.css"> <table id="table" data-toggle="table"> <th data-field="id" data-editable="true">ID...
这个插件极大地提高了用户在操作大量数据时的效率和体验。 在实际使用中，这三个文件需要一起引入到HTML页面中，通过设置适当的JavaScript选项和HTML标记，可以轻松创建具有编辑功能的表格。开发者可以根据需求调整...
总的来说，MooTools为开发者提供了强大而灵活的工具，使得在Web应用中实现tree和table控件变得简单。理解并掌握这些组件的使用方法，可以帮助我们构建更高效、更用户友好的界面，提升网站或应用的用户体验。在实践中...
低调发布，因为是小样版本，集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善，引入ajax元素。尽请期待。 demo地址： ...
在Bootstrap中，可以通过添加`.table-actions`类来创建一个操作列，通常用于显示编辑、删除等操作： ```html <table class="table"> 张三 <td>25 北京 <td class="table-actions"> 编辑 删除 <!-- ...
Bootstrap Table 提供了一套灵活、响应式的表格解决方案，使得在网页上展示结构化数据变得简单易行。其核心特性包括： 1. **响应式设计**：Bootstrap Table 自带响应式布局，确保在不同设备和屏幕尺寸上都能良好...
LayUI table组件提供了一种方便的方式来展示和操作数据，包括分页、筛选和刷新等。然而，当用户刷新表格内容时，有时我们希望页码能够重置回第一页，但默认情况下，LayUI table的刷新功能并不会自动重置页码。这个...