下次自动登录
关注移动互联网和移动APP开发工具、开发框架、测试工具、微信开发、Android源码、Android开源类库以及各种开源组件的IT科技网站
现在的位置:
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。
bootstrap table系列：
一、效果展示
1、表格行样式
&比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图：
2、表格行内编辑
第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果：
点击某个单元格数据
编辑后完成后
3、表格行列合并
关于行列合并的需求博主觉得是非常常见的，尤其是做页面报表的时候需要用到。先来看看效果：
当前页显示不全，点击进入看看。怎么样？效果还不错吧。
4、表格数据导出
&关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
导出当前页到excel
导出表格所有数据
导出选中行数据
&至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。
二、表格行样式代码示例
&关于表格行的样式设置，其他是它一个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都用得着。当然，效果并不难，自己用jQuery设置tr的背景色也可以实现，但是博主觉得，既然bootstrap table提供了机制设置行的背景色，我们何不用它内置的api呢。我们看看如何实现。
初始化表格的时候
　　　　 //初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
//toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
search: true,
//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true,
//是否显示所有的列
showRefresh: true,
//是否显示刷新按钮
minimumCountColumns: 2,
//最少允许的列数
clickToSelect: true,
//是否启用点击选中行
height: 500,
//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID",
//每一行的唯一标识，一般为主键列
showToggle: true,
//是否显示详细视图和列表视图的切换按钮
cardView: false,
//是否显示详细视图
detailView: false,
//是否显示父子表
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
return {};
return { classes: strclass }
columns: [{
checkbox: true
field: 'ORDER_NO',
title: '订单编号'
field: 'ORDER_TYPE',
title: '订单类型'
field: 'ORDER_STATUS',
title: '订单状态'
field: 'REMARK',
title: '备注'
其实重点就在这个参数里面：
　　　　　　　rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
return {};
return { classes: strclass }
bootstrap table支持5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，博主第一次用的时候也研究了好久，按照bootstrap table的规则，必须返回一个json格式的对象型如：&{ classes: strclass } 。
三、表格行内编辑代码示例
&关于表格行内编辑，需要使用bootstrap table扩展的几个js文件。
1、引入额外的js文件
&link rel="stylesheet" href="///vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"&
&script src="///vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"&&/script&
&script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"&&/script&
2、在cshtml页面定义表格时，添加两个属性
&table id="tb_departments"&
&th data-field="Name" data-editable="true"&部门名称&/th&
&th data-field="ParentName"&上级部门&/th&
&th data-field="Level" data-editable="true"&部门级别&/th&
&th data-field="Desc" data-editable="true"&描述&/th&
3、在js里面初始化表格的时候注册编辑保存的事件
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
onEditableSave: function (field, row, oldValue, $el) {
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
error: function () {
alert("Error");
complete: function () {
重点还是看看这个事件的处理方法
　　　　　　　onEditableSave: function (field, row, oldValue, $el) {
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
error: function () {
alert("Error");
complete: function () {
对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
四、表格行列合并代码示例
&表格的行列合并功能不用引用其他的js文件，只需要在cshtml页面使用table的colspan和rowspan即可实现。
1、cshtml页面
&table id="tb_report"&
&th colspan="4" data-valign="middle" data-align="center"&第一季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第二季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第三季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第四季度&/th&
&th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center"&年度汇总&/th&
&th data-field="JanCount" data-align="center"&一月&/th&
&th data-field="FebCount" data-align="center"&二月&/th&
&th data-field="MarCount" data-align="center"&三月&/th&
&th data-field="FirstQuarter" data-align="center"&第一季度&/th&
&th data-field="AprCount" data-align="center"&四月&/th&
&th data-field="MayCount" data-align="center"&五月&/th&
&th data-field="JunCount" data-align="center"&六月&/th&
&th data-field="SecondQuarter" data-align="center"&第二季度&/th&
&th data-field="JulCount" data-align="center"&七月&/th&
&th data-field="AguCount" data-align="center"&八月&/th&
&th data-field="SepCount" data-align="center"&九月&/th&
&th data-field="ThirdQuarter" data-align="center"&第三季度&/th&
&th data-field="OctCount" data-align="center"&十月&/th&
&th data-field="NovCount" data-align="center"&十一月&/th&
&th data-field="DecCount" data-align="center"&十二月&/th&
&th data-field="ForthQuarter" data-align="center"&第四季度&/th&
2、js初始化并无特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
怎么样，有没有很简单。当然，有人说了，你都可以不用js初始化，直接在cshtml里面用table的属性去设置url、分页等信息。确实，如果我们看过它的api，会发现它初始化的每一个属性都对应一个table的属性。型如
如果你的表格没有一些特殊的事件需要处理，这样是完全没有问题的。
五、表格数据导出代码示例
&表格数据的导出功能也需要一些扩展的js支持。
1、引入额外的js文件
&script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"&&/script&
&script src="///hhurz/tableExport.jquery.plugin/master/tableExport.js"&&/script&
2、js初始化的时候
　　　　　$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "client",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
clickToSelect:true,
showExport: true,
//是否显示导出
exportDataType: "basic",
//basic', 'all', 'selected'.
columns: [{
checkbox: true
field: 'Name',
title: '部门名称'
field: 'ParentName',
title: '上级部门'
field: 'Level',
title: '部门级别'
field: 'Desc',
title: '描述'
还是来看重点：这两个属性
showExport: true,
//是否显示导出
exportDataType: "basic",
//basic', 'all', 'selected'.
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。
以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。
1、行内编辑的功能是每一个单元格提交到后台，这样会造成数据库的频繁操作，感觉不太合适。不知道有没有更好的方式，每行提交到后台。
2、导出的功能虽然很好用，但是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。
源码提供出来，园友们有兴趣可以看看。。
【上篇】【下篇】Html 有一个table表格。我怎么用js 去合并某一个单元格，或者某一行 或者某一列？坐等高手思路。可以用JQ_百度知道
Html 有一个table表格。我怎么用js 去合并某一个单元格，或者某一行 或者某一列？坐等高手思路。可以用JQ
或者某一行 或者某一列Html 有一个table表格？坐等高手思路。我怎么用js 去合并某一个单元格
某两个单元格 或者某两行 或者某两列
提问者采纳
&&ID&&我是P1&&，查找&nbsp。&&&我是P3&&&;&nbsp，把新的子节点添加到指定节点;/html&&;&&&&html&&&div1&&&p&&&div1&);/script&&&createAttribute()&/script&gt，查找&&nbsp.getElementById(&&&lt，返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。&&&我是P2&&);&&&nbsp，从父元素中删除子元素!DOCTYPE&/p&&&&id=&&body&;&&);insertBefore()&&&/p&&nbsp，在上面查找到的元素中追加新元素.createElement(&&body&p&createElement()&div1&&&nbsp，创建属性节点;&&p&&&gt。&nbsp，替换子节点;&&&&&&p&&&&&nbsp。&&node=&&&&p&的元素;&div&&&&&)!DOCTYPE&&&lt.appendChild(para);&p1&2;&&&&&p&&setAttribute()&nbsp.appendChild(node);/p&&nbsp，把指定属性设置或修改为指定的值;&div&&nbsp，这段代码创建文本节点para。&&&parent=&&;我是P1&script&gt。&&&元素;&&&;&&&script&&nbsp。&&&&;&&;&&&&&，这段代码创建了一个新的&&&nbsp.getElementById(&;;para=&&&&&&&&&div1&&&其它的不一一说明;&&nbsp.removeChild(child);child=&&p2&的&&&&html&;&&element=&);&的元素：方法&&&&removeChild()&&appendChild()&nbsp、添加HTML元素&lt。&&&&getElementsByClassName()&/div&getAttribute()&&元素var&我是P2&&lt，返回包含带有指定类名的所有元素的节点列表;&元素追加文本节点var&&&&id=&var&nbsp.createTextNode(&;&&&&&&/body&id=&&，返回带有指定&&id=&html&p2&&&&&；1;&&nbsp：var&&&&nbsp。&&&getElementsByTagName()&id=&&nbsp，创建文本节点;;var&&&replaceChild()&&;/html&&&&&&;&&&&：&createTextNode()&p1&div1&p2&&&&p&&nbsp：&&&/body&&&p&gt.getElementById(&quot，查找到一个已有的元素element，创建元素节点;&nbsp。&nbsp。&&;&nbsp，返回指定的属性值，在指定的子节点前面插入新的子节点;id=&&;&/div&gt：&&nbsp，删除子节点;&;&/p&id=&&&&&&nbsp、删除HTML元素&lt，向&&描述getElementById()&&&&&p1&quot使用HTML DOM 对象方法 组合起来使用;html&&&&&&id=&quot
提问者评价
谢谢。这么详细，我试了你的方法挺好用的
其他类似问题
为您推荐：
单元格的相关知识
其他2条回答
用JS 动态创建表格即可！
好的。 我自己做些数据试试
用js定位到该单元格、行、列 然后修改其属性 合并
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁table 合并单元格 列序问题_百度知道
table 合并单元格 列序问题
即一行三列之前是正确的，没有能正确取得列号，由于表头有复杂的合并。下面是我实现的代码，点击表头，所以下面空白的单元格列号不能正确取出，之后就不正确了，就到得当前表头所在列下面的空白单元格列的序号想实现的效果是，目前能保证在没有跨行的情况下是正确的，跨列合并的表头单元格取第一个单元格所在列。我是根据表头计算的。请大牛们指教指教
currentTdIndex){
&currentTrIndex=$(tdObj);#&)&&nbsp,obj);&
&targetTdIndex://e://e;index=& &
&+$(obj);&nbspfunction&+tableId+&
&&+currentTrIndex+&quot，得到某个单元格所对应的真实columnIndex
&&&&colspan=$(&
&目标td&&&nbsp.attr(&
&nbsp.&&&&nbsp.在有合并单元格的情况下;return&targetTdIndex=(colspan==0;function&&
&&&&/zhidao/pic/item/2cf5e0fec802395edf8db1ca1370fd:eq(&&var&
&targetTdIndex=getTargetColumnIndex(&var&nbsp:colspan)+targetTdIvar&nbsp.index()+&&nbsp?1;&nbsp://e;table1&
&colspan&&&targetTdIndex=0.jpg" esrc="
&.com/zhidao/wh%3D600%2C800/sign=dbb6fd250eed/2cf5e0fec802395edf8db1ca1370td&quot:eq(&&nbsp:eq(&quot.index()),tdObj){
&nbsp.each(function(i){ &&alert(&&&)&&
&nbsp.);+i+&&if(i&lt.index();&&&&&nbsp.&
&#&&alert(&}
然后有三行两列;就可以了 ;2&quot，每个单元格中放置一个标签;&&gt，是合并单元格吗我已经设置了一个table控件;td&td colspan=&&#47，直接在&lt
合并之后，表头对应的数据列能不能对应上？
其他类似问题
为您推荐：
合并单元格的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁先上效果图：
body{margin:0padding:0-moz-user-select:cursor:}
.tabEditDiv{position:width:15height:15cursor:}.seltab{position:width:15height:15cursor:background:url(images/seltab.gif) no-}.splitx{overflow:position:height:3cursor:row-background:red !filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1; }.splity{overflow:position:width:3cursor:col-background:red !filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1;}#tabletitle{font-weight:font-size:18height:30width:800margin:0text-align:font-family:宋体;line-height:30}#tabletitle input{width:100%;border:0height:28line-height:30text-align:font-weight:font-size:18font-family:宋体;}.finelinetable{border-right:1px solid #000;border-top:1px solid #000;border-collapse:font-size:13width:800margin:0}.finelinetable td{border-left:1px solid #000;border-bottom:1px solid #000;height:25}
&&&& &div id=&tabletitle&&表格标题&/div&
&&&& &table id=&mainTable& class=&finelinetable&&
&&&&&&&& &tr&
&&&&&&&&&&&& &td colspan=&8&&1&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td rowspan=&3&&2&/td&
&&&&&&&&&&&& &td&3&/td&
&&&&&&&&&&&& &td colspan=&3&&4&/td&
&&&&&&&&&&&& &td&5&/td&
&&&&&&&&&&&& &td&6&/td&
&&&&&&&&&&&& &td&7&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td&8&/td&
&&&&&&&&&&&& &td&9&/td&
&&&&&&&&&&&& &td&10&/td&
&&&&&&&&&&&& &td colspan=&2&&11&/td&
&&&&&&&&&&&& &td&12&/td&
&&&&&&&&&&&& &td&13&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td&14&/td&
&&&&&&&&&&&& &td colspan=&3&&15&/td&
&&&&&&&&&&&& &td&16&/td&
&&&&&&&&&&&& &td&17&/td&
&&&&&&&&&&&& &td&18&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td colspan=&8&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td rowspan=&3&&&&/td&
&&&&&&&&&&&& &td&&&/td&
&&&&&&&&&&&& &td colspan=&2&&&&/td&
&&&&&&&&&&&& &td&&&/td&
&&&&&&&&&&&& &td colspan=&3&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td&&&/td&
&&&&&&&&&&&& &td colspan=&2&&&&/td&
&&&&&&&&&&&& &td&&&/td&
&&&&&&&&&&&& &td colspan=&3&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td style=&height: 25px&&&&/td&
&&&&&&&&&&&& &td colspan=&2& style=&height: 25px&&&&/td&
&&&&&&&&&&&& &td style=&height: 25px&&&&/td&
&&&&&&&&&&&& &td colspan=&3& style=&height: 25px&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td&&&/td&
&&&&&&&&&&&& &td colspan=&7&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td colspan=&2&&&&/td&
&&&&&&&&&&&& &td colspan=&6&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td colspan=&2&&&&/td&
&&&&&&&&&&&& &td colspan=&6&&&&/td&
&&&&&&&& &/tr&
&&&&&&&& &tr&
&&&&&&&&&&&& &td colspan=&2&&&&/td&
&&&&&&&&&&&& &td colspan=&6&&&&/td&
&&&&&&&& &/tr&
&&&& &/table&
//注释:获取对象.示例:$(&objectId&) 等同于 document.getElementById(&objectId&)
&if (typeof $ != &function&) { var $ = function (ids) { return document.getElementById(ids) }; }
&//注释:获取坐标,parentNode最后节点.示例:absPos(object).x
&function absPos(_node, parentNode) { var x = y = 0; var node = _ do { if (parentNode && node == parentNode) { } x += node.offsetL y += node.offsetT } while (node = node.offsetParent); node = _ return { 'x': x, 'y': y }; }
&function addEvent(object, event, func) { if (object.addEventListener) { /* W3C方法（DOM方法）下面语句中的false意思是用于冒泡阶段,若是true则是用于捕获阶段（IE不支持捕获），所以这里用false是一方面的原因是为了统一 */object.addEventListener(event, func, false); } else if (object.attachEvent) { /* MSIE方法(IE方法) */object['e' + event + func] = object[event + func] = function () { object['e' + event + func](window.event); }; object.attachEvent('on' + event, object[event + func]); } /*如两种方法都不具备则返回false */ }
&//注释:判断是否是对象内子节点触发的onmouseover和onmouseout.示例:e = e ||if (isMouseLeaveOrEnter(e, obj)) {}
&function isMouseLeaveOrEnter(e, handler) { if (e.type != 'mouseout' && e.type != 'mouseover') var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromE while (reltg && reltg != handler) reltg = reltg.parentN return (reltg != handler); }
&var table = $(&mainTable&);
&var tabEditD //覆盖在table上的DIV
&var cellHide = [];//补充的rowspan,cellspan的格子
&var moveMode = &&;//鼠标移动模式
&var moveArgs = []; //移动模式参数
&document.onselectstart = function(){};
&addEvent(window,&resize&,function(){loadTable();});
&$(&tabletitle&).ondblclick = function(){
&&&& if(this.getElementsByTagName(&input&).length & 0){}
&&&& this.innerHTML = &&input type='text' value='& + (this.innerHTML == &表格标题& ? && : this.innerHTML) + &' /&&;
&&&& var input = this.getElementsByTagName(&input&)[0];
&&&& var _this =
&&&& input.focus();
&&&& input.onblur = function(){_this.innerHTML = this.}
&&&& input.onkeydown = function (e) { var key = window.event ? window.event.keyCode : e. if (key == 13) this.blur(); };
&function loadTable(){
&&&& var tabPos = absPos(table);
&&&& if(!tabEditDiv){
&&&&&&&& tabEditDiv = document.createElement(&div&);
&&&&&&&& document.body.appendChild(tabEditDiv);
&&&& tabEditDiv.style.cssText = &left:& + (tabPos.x - 15) + &top:& + (tabPos.y - 15) + &&;
&&&& tabEditDiv.className = &tabEditDiv&;
&&&& //全选Table按钮
&&&& if(!seltab){
&&&&&&&& var seltab = document.createElement(&div&);
&&&&&&&& seltab.style.cssText = &width:15height:15left:& + (tabPos.x - 15) + &top:& + (tabPos.y - 15) + &&;
&&&&&&&& seltab.className = &seltab&;
&&&&&&&& seltab.onclick = function(){
&&&&&&&&&&&& if(table.getAttribute(&selected&) == &1&){
&&&&&&&&&&&&&&&& table.removeAttribute(&selected&);
&&&&&&&&&&&&&&&& table.style.background = &&;
&&&&&&&&&&&&&&&& this.style.width = &15px&;
&&&&&&&&&&&&&&&& this.style.height = &15px&;
&&&&&&&&&&&& }else{
&&&&&&&&&&&&&&&& table.setAttribute(&selected&,&1&);
&&&&&&&&&&&&&&&& table.style.background = &#B6CAEB&;
&&&&&&&&&&&&&&&& this.style.width = (table.clientWidth + 15) + &px&;
&&&&&&&&&&&&&&&& this.style.height = (table.clientHeight + 15) + &px&;
&&&&&&&&&&&& }
&&&&&&&& }
&&&&&&&& document.body.appendChild(seltab);
&&&& loadTableEdit();
&} loadTable();
&function loadTableEdit(){ //加载可调整宽度及高度的div
&&&& var tabPos = absPos(table);
&&&& tabEditDiv.innerHTML = &&;
&&&& var cellcount = 0;
&&&& var isadd = cellHide.length == 0;
&&&& for(var i=0;i&table.rows.i++){
&&&&&&&& for(var j=0;j&table.rows[i].cells.j++){
&&&&&&&&&&&& var pos = absPos(table.rows[i].cells[j],table);
&&&&&&&&&&&& if(!$(&splitx_& + (pos.y + table.rows[i].cells[j].clientHeight))){ //加载可调整高度的div
&&&&&&&&&&&&&&&& var split = document.createElement(&div&);
&&&&&&&&&&&&&&&& split.id = &splitx_& + (pos.y + table.rows[i].cells[j].clientHeight);
&&&&&&&&&&&&&&&& split.className = &splitx&;
&&&&&&&&&&&&&&&& split.style.cssText = &width:& + table.clientWidth + &left:15top:& + (pos.y + table.rows[i].cells[j].clientHeight - 1 + 15) + &px&;
&&&&&&&&&&&&&&&& split.onmousedown = function(){
&&&&&&&&&&&&&&&&&&&& var index = this.getAttribute(&index&);
&&&&&&&&&&&&&&&&&&&& if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName(&div&); var left = parseInt(this.id.split(&_&)[1]); for(var k=0;k&divs.k++){ if(divs[k].id.indexOf(&splitx_&) & 0) if(parseInt(divs[k].id.split(&_&)[1]) & left) index++; } this.setAttribute(&index&,index);}else{index = parseInt(index);}
&&&&&&&&&&&&&&&&&&&& moveMode = &cellHeight&;
&&&&&&&&&&&&&&&&&&&& moveArgs[moveArgs.length] =
&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&& tabEditDiv.appendChild(split);
&&&&&&&&&&&& }
&&&&&&&&&&&& if(j & 0){ //加载可调整宽度的div
&&&&&&&&&&&&&&&& if(!$(&splity_& + pos.x)){
&&&&&&&&&&&&&&&&&&&& var split = document.createElement(&div&);
&&&&&&&&&&&&&&&&&&&& split.id = &splity_& + pos.x;
&&&&&&&&&&&&&&&&&&&& split.className = &splity&;
&&&&&&&&&&&&&&&&&&&& split.style.cssText = &height:& + table.clientHeight + &top:15left:& + (pos.x - 2 + 15) + &px&;
&&&&&&&&&&&&&&&&&&&& split.onmousedown = function(){
&&&&&&&&&&&&&&&&&&&&&&&& var index = this.getAttribute(&index&);
&&&&&&&&&&&&&&&&&&&&&&&& if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName(&div&); var left = parseInt(this.id.split(&_&)[1]); for(var k=0;k&divs.k++){ if(divs[k].id.indexOf(&splity_&) & 0) if(parseInt(divs[k].id.split(&_&)[1]) & left) index++; } this.setAttribute(&index&,index);}else{index = parseInt(index);}
&&&&&&&&&&&&&&&&&&&&&&&& moveMode = &cellWidth&;
&&&&&&&&&&&&&&&&&&&&&&&& moveArgs[moveArgs.length] =
&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&& tabEditDiv.appendChild(split);
&&&&&&&&&&&&&&&& }
&&&&&&&&&&&& }
&&&&&&&&&&&& if(isadd){
&&&&&&&&&&&&&&&& loadHide();
&&&&&&&&&&&& }
&&&&&&&&&&&& table.rows[i].cells[j].onmousedown = function(){
&&&&&&&&&&&&&&&& //alert(&x&);
&&&&&&&&&&&& }
&&&&&&&& }
&function loadHide(){
&&&& cellHide = [];
&&&& var tempHide = [];
&&&& for(var i=0;i&table.rows.i++){
&&&&&&&& for(var j=0;j&table.rows[i].cells.j++){
&&&&&&&&&&&& for(var k=1;k&table.rows[i].cells[j].rowSk++){
&&&&&&&&&&&&&&&& cellHide[cellHide.length] = [i+k,j];
&&&&&&&&&&&&&&&& tempHide[tempHide.length] = [i+k,j];
&&&&&&&&&&&& }
&&&&&&&& }
&&&& for(var i=0;i&table.rows.i++){
&&&&&&&& for(var j=0;j&table.rows[i].cells.j++){
&&&&&&&&&&&& for(var k=1;k&table.rows[i].cells[j].colSk++){
&&&&&&&&&&&&&&&& var yc = 0;
&&&&&&&&&&&&&&&& for(var l=0;l&tempHide.l++){
&&&&&&&&&&&&&&&&&&&& if(tempHide[l][0]==i&&tempHide[l][1]&j){yc++;}
&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&& for(var l=0;l&j;l++){
&&&&&&&&&&&&&&&&&&&& if(table.rows[i].cells[l].colSpan & 1){yc+=table.rows[i].cells[l].colSpan-1;}
&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&& cellHide[cellHide.length] = [i,j+k+yc];
&&&&&&&&&&&& }
&&&&&&&& }
&addEvent(document,&mousemove&,function(e){
&&&& e = e || window.
&&&& if(moveMode == &cellWidth&){ //调整宽度
&&&&&&&& var temp = moveArgs[0];
&&&&&&&& var test = &&;
&&&&&&&& for(var i=0;i&table.rows.i++){
&&&&&&&&&&&& var index =
&&&&&&&&&&&& for(var j=0;j&cellHide.j++){
&&&&&&&&&&&&&&&& if(i==cellHide[j][0] && temp&=cellHide[j][1]){index--;}
&&&&&&&&&&&& }
&&&&&&&&&&&& if(!table.rows[i].cells[index] || index & 0 || table.rows[i].cells[index].colSpan & 1){}
&&&&&&&&&&&& if(e.clientX & absPos(table.rows[i].cells[index]).x)
&&&&&&&&&&&&&&&& table.rows[i].cells[index].style.width = e.clientX - absPos(table.rows[i].cells[index]).x + &px&;
&&&&&&&& }
&&&&&&&& loadTableEdit();
&&&& }else if(moveMode == &cellHeight&){ //调整高度
&&&&&&&& var index = moveArgs[0];
&&&&&&&& for(var i=0;i&table.rows[index].cells.i++){
&&&&&&&&&&&& if(table.rows[index].cells[i].rowSpan & 1){}
&&&&&&&&&&&& if(e.clientY & absPos(table.rows[index].cells[i]).y)
&&&&&&&&&&&&&&&& table.rows[index].cells[i].style.height = e.clientY - absPos(table.rows[index].cells[i]).y + &px&;
&&&&&&&& }
&&&&&&&& loadTableEdit();
&addEvent(document,&mouseup&,function(e){
&&&& moveMode = &&; moveArgs = [];
&addEvent(document,&mouseout&,function(e){
&&&& e = e ||
&&&& if (!isMouseLeaveOrEnter(e, this)) { }
&&&& moveMode = &&; moveArgs = [];
#region 合并单元格 合并某一行的所有列 　　///　 &summary&　 　　///　 合并GridView中某行相同信息的行（单元格） 　　///　 &/summary&　 　　///　 &param　 name=&GridView1&&GridView对象&/param&　 　　///　 &param　 nam
表格：合并单元格
参考示例：合并单元格
调用方法：margeCells。如下代码：
grid.on(&load&, onLoad); function onLoad(e) { var grid = e.
var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan:
//　js取单元格自定义属性值，IE和FF下的不同实现 　　　　　result+=&&Item&& var isIE=document.all ? true : if(isIE)//IE { for (var i=0;i&obj.cells.i++) result+=&&&+obj.cell
JS遍历Table的所有单元格内容思路是遍历Table的所有Row，遍历Row中的每一列，获取Table中单元格的内容
function GetInfoFromTable(tableid) { var tableInfo = &&; var tableObj = document.getElementById(tableid); for (var i = 0; i &
业务需要，动态生成表，同一列中数据相同的单元格需要合并。 解决方案，创建Table控件处理类，代码如下：
/// &summary&表格控件相关操作类 /// &/summary& public static class aspTable { /// &summary&合并行 /// &/summary& /// &rem
如何通过JAVASCRIPT实现当点击相应的单元格，该单元格内文本变成可编辑的INPUT或SELECT，离开单元格后又单元格内文本为修改后文本。 我通过以下方法来实现点击单元格变成INPUT，可不知该在点其它单元格后恢复文本状态和如何返回INPUT后修改的值。是否有更好的方法来实现该效果。
&script language=&javascript&& windo
本文实例讲述了JS实现向表格行添加新单元格的方法。分享给大家供大家参考。具体如下： 下面的JS代码可以想表格中指定id的行插入新的单元格
&!DOCTYPE html& &html& &head& &script& function insCell() { var x=document.getElementById('tr1').insertCe
本文实例讲述了JS实现控制表格单元格垂直对齐的方法。分享给大家供大家参考。具体如下： 下面的代码控制指定的单元格靠底部垂直对齐
&!DOCTYPE html& &html& &head& &script& function valignCell() { var x=document.getElementById('myTable').rows[0
本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法。分享给大家供大家参考。具体如下： 下面的代码控制表格单元格的内容向右对齐
&!DOCTYPE html& &html& &head& &script& function alignCell() { document.getElementById('td1').align=&rig
第一、设置RowsDefaultCellStyle的WrapMode属性值为true(表示支持多行显示)
第二、设置AllowUserToResizeColumns属性值为true(表示用户拉大行高)
第三、设置AutoSizeRowsMode属性值为AllCells(表示所有单元格自动调节单元格高度)，属性值为DisplayedCells（表示当前单元格自动调节高度，可以提高性能。）
从cnblogs看到的代码，作者的代码随便不兼容firefox但，有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下，有助于学习，对于更多的文章可以参考脚本之家以前发布的文章。
&html& &head& &script language=&javascript&& function mouseover(){ var Obj
本文实例讲述了JavaScript动态改变表格单元格内容的方法。分享给大家供大家参考。具体如下： JavaScript动态改变表格单元格的内容，下面的代码通过修改单元格的innerHTML来修改单元格内容
&!DOCTYPE html& &html& &head& &script& function changeContent() { var x
【Title】[原]表格单元格交错着色 【Abstract】以空间换时间，循环确定所着颜色。 【Environment】jQuery 【Author】wintys ()
【Content】: 1、效果
2、问题描述 对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示，一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多，那怎么办呢？我们就中和下利用JQuery来和他一个table里面相同内容的单元格，这里代码跟大家分享下，希望对大家有用，如下：
头部JQuery代码
GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[源码下载]
扩展GridView控件(11) - 合并指定列的相邻且内容相同的单元格
作者： webabcd
扩展GridView控件：
合并指定列的相邻且内容相同的单元格
使用方法（设置属性）：
MergeCells - 需要合并单元
1.&table&标签的结构示例代码：
&table border=&1&&
&caption&信息统计表&/caption&
用JS获取表格中单击某个单元格中按钮，得到所在行的信息：
function GetRowNo() { var e = e || window. var target = e.target || e.srcE if (target.parentNode.tagName.toLowerCase() == &td&) { rowInde
Excel小技巧：给单元格打上勾
按住Alt键不放，再输入小数字键盘上的数字41420，松开Alt键就可以了。
如何动态添加单元格!!
用insertRow()和insertCell()方法
其用法如下: insertRow()
varnewTR=TableOBJ.insertRow(N);
其中N表示插入到第几行! 说明:当N=0时,插入到最上面一行!当N=-1时插入到最后
安卓开发gridview根据屏幕宽度行列相同的单元格集合
前不久网上有人问如何在java代码里根据屏幕宽度动态设定每一行的单元格数。百度了好久，没结果，结果自己认真分析，实现了这个功能。 gridview可以在xml布局里面设定每一个单元的宽度，以及手机屏幕的宽度来确定，一行能够容纳的单元格数。怎样在java代码里，动态设定一行的单元格数呢？ package com.lin.t
如下所示：
function _w_table_rowspan(_w_table_id,_w_table_colnum){
_w_table_firsttd = &&;
这一篇是对“给表格的单元格增加编辑功能”的补充，目的是让表格列显示Checkbox并允许单击改变选中状态，例子中的表格共有三列，其中后两列均需要显示为Checkbox。 步骤一，构造TableViewer；
final String[]columnNames =
new String[]{ & Pro
最近做一个功能，考虑到用户使用方便，减少弹出页面，采用点“编辑”按钮无需弹出页面直接当前行的单元格内容就能编辑。进入页面显示如下图：
点“编辑”按钮后显示如下图：
编号为1的“星期”和“是否上班”均可编辑，编辑完成后，点“更新”保存。 第一张图中的数据加载是通过下述方法实现： protectedvoid GridView_RowDataBound(object se
使用纯粹的SWT可以实现在单元格中编辑（In place edit）的功能，代码见这个例子，这里要说的是利用jface完成差不多的工作：用户单击单元格，出现一个下拉菜单，用户通过选择来改变单元格所代表的该行对象的属性。 对org.eclipse.jface.viewers.TableViewer.TableViewer的介绍这里就不赘述了，一般我们都是像下面这样定义TableViewer的：
GridView，ASP.NET中很常用的数据显示控件，这里，我将用这个控件来实现课程表的显示。首先说说课程表的显示与普通记录的显示有何不同？这里所说的普通记录是指直接从数据库中查询出来的、没有经过任何处理的记录。通常，我们用GridView显示这些普通记录，只需直接将这些记录表绑定到GridView中即可。但是，课程表的显示可不是这么简单，它需要将普通记录继续加工，需要根据记录中具体的数据来确定
oracle 中 如何将某行的单元格数据拆分成多行记录
在项目实施阶段，遇到这样的情况，原始设计是将附件的地址存放在一个单元格中，这个单元格后期务必要改为clob类型，最后根据附件地址取值时，需要将地址根据 特殊标识 来拆分。确实比较恶心 ，但是没法，附件涉及到太多的功能模块，重新设计表结构不太现实， 这时候 oracle的regexp_subter函数就派上用场了。
原文地址： /KB/webforms/EditGridviewCells.aspx
[原文源码下载]
[译者改后源码下载]
[翻译]在GridView中针对鼠标单击的某一独立单元格进行编辑
原文发布日期：
作者： Declan Bright
翻译： webabcd
ASP.NET的GridV
&html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&& &title&js动态操作表格&/title& &script language=&javascrip
&script defer& var overcolor='#cccccc'; var outcolor='#f2f3f7'; var clkcolor='deeppink'; var pObj= for (var i=0;i&phx.rows.i++){ for(var j=0;j&phx.rows[i].cells.j++){ ph
irefox中连续英文字符如果要CSS控制强制换行，探索了N久，发现是实现不了的逼不得已的时候就用js脚本进行控制吧
英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &h
代码如下，可直接运行：
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&& &HTML& &HEAD& &TITLE& New Document &/TITLE& &META NAME=&Generator&
功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。
主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据
源代码： HTML代码：
　 现代 Web 设计与开发越来越看重浏览器兼容问题，IE 每个新版本的推出，都在 CSS 的标准化方面前进一大步，同时，也就不可避免地在 IE 的各个主要版本之间产生兼容问题，尽管 IE8 推出已有时日，使用 IE6的用户仍然相当可观。本文以速查手册的形式介绍 CSS （2.1 和 3）在 IE6,7,8 三个版本之间的兼容情况。
这套速查手册可以打印成 A3 尺寸，共
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff)
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd&& &html xmln
使用jQuery
显示：$(&#a&).attr(&style&,&&);
隐藏：$(&#a&).attr(&style&,&display:none&);
但是显示这个方法在IE8中不行
显示：$(&#a&).removeA
翻出来源码开了下，字符串中使用换行的方法为&Name:{$name}\nAddress:{$adress}\nCity:{$city}\nCountry:{$country}\n ......& 既然&\n&起不到换行的目的，修改成&\r\n&看看. 修改 =》 提交 ＝》测试 得出的结果还是 没有换行！！！！ 难道是操作系统兼容问题？？
本?丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~
先实现一个比较简单的功能：
需求：网页遮罩层/弹出层，兼容IE6
幸好本?丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。
屁话不多放，无码无真相！
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签。所以要解决padding的兼容问题就要靠前面提到的标签。 以sccas-site为例，左侧导航栏在padding上产生了ie6、ie7以及ff浏览器不兼容，修改代码如下： #menu7 li a {
作者：yemoo 来源：WWW.AJAXBBS.NET 发布日期：
原文地址：http://www.ajaxbbs.net/blog/post/100/
特别说明：这只是一个纯客户端使用的js组件，非服务端控件（如asp.net控件等），改组件只是为了美化消息提示。
PS：希望大家多提有实际价值的建议或意见，如果合适我会继续做完善修改。 =================
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式，但是ie6下并不兼容这种定位 浮动导航条的样式，重要的是position:bottom:60(浮动导航底部距离窗口底部60px)
.floating_9677{position: z-index:961; bottom:60p