<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWR3.0文件上传</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type='text/javascript' >
(function($){
$.fn.table=function(options){
if(this.length<1){
return;
}
var table=this.get(0);
$("tbody",table).remove();
if(options.columns){
this.data("columns",options.columns);
createTableHeader(options).appendTo(table);
}
if(options.data && options.data.length>0){
createTablebody(table,options).appendTo(table);
}
bingTableEvent(table,options);
};
$.fn.tableAddData=function(data){
createTablebody(this.get(0),{"data":data,columns:this.data("columns")},true);
};
function createTableHeader(options){
var columns=options.columns;
var thead=$("<thead><tr></tr></thead>");
$.each(columns,function(index,column){
var td=document.createElement("td");
$(td).attr("name",column.attribute);
$(td).prop("width",column.width);
$(td).text(column.name);
$("tr",thead).append(td);
});
return thead;
};
function createTablebody(table,options,addModel){
var tbody= addModel ? $("tbody",table) : $("<tbody></tbody>");
var domTr=$("thead tr",table).clone();
var data=options.data;
$.each(data,function(index,row){
var tr=domTr.clone();
$("td",tr[0]).each(function(cellIndex){
//if the column format function exists then call it
if(options.columns && $.isFunction(options.columns[cellIndex].format)){
var refAttribute=$(this).attr("name");
var formatResult=options.columns[cellIndex].format(row[refAttribute],row,cellIndex)
$(this).html(formatResult);
}else{
$(this).text(row[$(this).attr("name")]);
}
});
tr.appendTo(tbody);
});
return tbody;
};
function bingTableEvent(table,options){
$("thead tr td").on("click",function(event){
if(options.onsort){
options.onsort($(this).attr("name"),event)
}
});
$("tbody tr").on("dblclick",function(event){
if(options.onsort){
options.ontrdblclick(this,event)
}
});
}
})($);
$(document).ready(function(){
var options={
onsort:function(attr){alert("sort:"+attr)},
ontrdblclick:function(tr){alert(tr.innerHTML)},
columns:[{name:"<font>编号</font>",attribute:"id",width:"10%",format:function(value,item,index){return "CKF"+value}},
{name:"名称",attribute:"name",width:"30%"},
{name:"说明",attribute:"description",width:"30%"},
{name:"作者",attribute:"author",width:"30%"}
],
data:[
{id:"1",name:"<red>我是谁</red>",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"2",name:"魔幻世界",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"3",name:"你是谁",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"4",name:"what's your name",description:"my name is ckf. what's your name",author:"chen zhiwu"}
]
}
$("#mytable").table(options);
$("#btnAdd").on("click",function(){
var data=[{id:"5",name:"new record",description:"sadfsdfsadfsd",author:"chen kai"}];
$("#mytable").tableAddData(data);
});
});
</script>
</head>
<body>
<table id="mytable" style="border:1px solid red;width:500px;height:200px"></table>
<input type="button" value="add" id="btnAdd"/>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何实现`jQuery Table`...在开发过程中，利用模块化和面向对象的编程方法可以提高代码的可读性和可扩展性。同时，考虑浏览器兼容性和响应式设计，以确保功能在各种设备和平台上都能正常工作。
在Web开发中，表格是展示数据的常见方式，jQuery UI Table通过提供可定制的样式和交互功能，使得网页表格更加美观且用户友好。本篇文章将深入探讨jQuery UI Table的核心特性、使用方法以及实际应用中的技巧。 首先...
虽然jQuery.table2excel的基本用法很简单，但其也提供了可定制的参数，以满足更多需求： - `ignoreColumn`：如果你只想导出表格的部分列，可以设置这个参数，例如`{ignoreColumn: [0,1]}`表示忽略第一列和第二列。 ...
通过jQuery，我们可以扩展这些功能，创建具有复杂布局、可排序、可筛选、可分页等特性的自定义表格。 1. **基础构建**： - 使用HTML基础结构：创建一个基本的`<table>`元素，包含`<thead>`（表头）、`<tbody>`...
js与jQuery实现获取table中的数据并拼成json字符串操作示例 本文主要介绍了使用JavaScript和jQuery实现从HTML表格中获取数据并将其拼成JSON字符串的操作示例。该示例涉及到JavaScript和jQuery对HTML页面表格数据的...
总的来说，"jquery-table2excel"插件为开发者提供了一种简单且高效的HTML表格到Excel导出功能，尤其适用于小型项目和快速原型。然而，对于大型应用或有复杂需求的场景，可能需要考虑使用更强大的服务器端解决方案，...
总之，“jquery.table2excel.js”为开发者提供了一种简单而实用的手段，将网页中的HTML表格转换为Excel文件，便于用户下载和后续处理。虽然有一定的局限性，但在许多场景下，它足以满足日常需求。正确理解和运用这个...
在JavaScript和jQuery的世界里，"js jquery实现table假分页"是一个常见的需求，尤其是在处理大量数据展示时。分页能够帮助优化用户体验，避免一次性加载过多数据导致页面响应变慢。假分页，又称为模拟分页，是通过...
同时，“根据自己的业务，各自封装”暗示了这个插件允许开发人员根据自己的特定需求进行二次开发和扩展，以实现个性化的功能。 “目前还商待完善！欢迎大家更新 改进！”这部分说明了jQuery Custom Table可能仍处于...
### JQuery 获取 Table 一列值的方法详解 在 Web 开发中，经常需要处理表格数据，尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格（`<table>`）中某一列的所有值。下面将详细介绍...
在jQuery基础上开发的插件如"jquery.fixedtable.js"，可以为开发者提供便捷的解决方案。这个插件的主要功能是在用户滚动页面时，使HTML表格的表头和列头保持固定，以便用户始终能看到列标题，方便查找和理解数据。 ...
在实际开发中，jQuery用于处理页面的动态交互，BootStrap提供美观的UI组件，而BootStrapTable则能够高效地展示和管理大量的表格数据。这三个技术的结合，是当前Web开发中的常见组合，对于提升开发效率和创建高质量...
`jquery.basictable`是基于jQuery的一个扩展，它利用jQuery的强大功能来实现表格的响应式设计。 **响应式设计** 响应式设计是现代网页开发的关键概念，它允许网站根据用户的设备和屏幕尺寸自动调整布局。`jquery....
首先，jQuery UI 是基于jQuery库的一个扩展，它提供了包括拖放（Drag and Drop）在内的多种用户界面交互功能。拖放功能允许用户通过鼠标操作将元素从一个位置移动到另一个位置，这种交互方式直观且易于理解，尤其...
在网页开发中，数据展示是不可或缺的一部分，而jQuery实现的分页排序Table组件则为开发者提供了高效、灵活的方式来处理大量数据的展示问题。这个组件通常用于动态加载和组织表格数据，使得用户可以轻松浏览和操作...
如果`jquery-rlutil-1.6.2.js`是一个自定义插件，它可能扩展了jQuery的功能，比如提供更方便的表格操作接口。学习和理解这个插件的工作原理可以帮助我们更好地实现类似的功能。 综上所述，这个示例涉及到的核心...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于“jQuery table选中表格行变色”这一功能，它在交互式网页设计中尤为常见，可以提升用户体验。下面将...
根据提供的信息，我们可以总结出以下知识点： ### 一、Table绑定数据与JQuery分页的基本...在实际项目开发中，还可以根据具体需求对上述代码进行适当的扩展和优化，例如增加更丰富的用户交互效果、错误处理机制等。
jQuery TableTree作为一款强大的表格树插件，不仅简化了开发过程，还提供了丰富的功能和良好的性能。通过灵活的配置和扩展，可以满足各种复杂的网页数据展示需求。无论是新手还是经验丰富的开发者，都能快速上手并...
jQuery插件通常是扩展jQuery功能的小型JavaScript代码块，它们可以通过$.fn.extend()方法附加到jQuery的核心对象上。在本例中，这个插件可能是为了简化和定制表格数据的筛选过程。 “这样就可以实现表格的筛选功能...