一组JS创建和操作表格的函数集合


Posted in Javascript onMay 07, 2009

stone.js
//**************************************神吹表格操作函数*******************************************************
//隐藏列
function setHiddenRow(tb,iCol){
for (i=0;i<oTable.rows.length;i++){
tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCol].style.display=="none"?"block":"none";
}
}
//隐藏行
function setHiddenRow(tb,iRow){
tb.rows[iRow].style.display = oTable.rows[iRow].style.display == "none"?"block":"none";
}
//创建表格
function createTable(id,rows,cells,tbid){
var tb=document.createElement("table");
var tbody = document.createElement("tbody");
for(var i=0;i<rows;i++){
var tr=document.createElement("tr");
for(var j=0;j<cells;j++){
var cell=document.createElement("td");
tr.appendChild(cell);
}
tbody.appendChild(tr);
}
tb.appendChild(tbody);
tb.setAttribute("id",tbid);//设置创建的TABLE的ID
document.getElementById(id).appendChild(tb);
}
//插入文本
function insertText(tb,row,cel,text){
txt=document.createTextNode(text);
tb.rows[row].cells[cel].appendChild(txt);
}
//修改文本
function updateText(tb,row,cel,text){
tb.rows[row].cells[cel].firstChild.nodeValue=text;
}
//添加子节点
function toAppendChild(tb,row,cel,child){
tb.rows[row].cells[cel].appendChild(child);
}
//删除某行
function removeRow(tb,row){
tb.lastChild.removeChild(tb.rows[row]);
}
//单元格设置属性
function cellSetAttribute(tb,row,col,attributeName,attributeValue){
tb.rows[row].cells[col].setAttribute(attributeName,attributeValue);
}
//单元格添加监听器
function cellAddListener(tb,row,cel,event,fun){
if(window.addEventListener)
{
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
//添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件,不用加on
// img.addEventListener('click', delRow(this), true);
tb.rows[row].cells[cel].addEventListener(event,fun, true);
}
else
{
//IE 的事件代码 在原先事件上添加 add 方法
// img.attachEvent('onclick',delRow(this));
tb.rows[row].cells[cel].attachEvent("on"+event,fun);
}
}
//新增行
function insertRow(oTable){
var tr=document.createElement("tr");
for (i=0;i<oTable.rows[0].cells.length;i++){
var td= document.createElement("td");
tr.appendChild(td);
}
oTable.lastChild.appendChild(tr);
}
//行设置属性
function rowSetAttribute(tb,row,attributeName,attributeValue){
tb.rows[row].setAttribute(attributeName,attributeValue);
}
//行添加监听器
function rowAddListener(tb,row,event,fun){
if(window.addEventListener)
{
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
//添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件,不用加on
// img.addEventListener('click', delRow(this), true);
tb.rows[row].addEventListener(event,fun, true);
}
else
{
//IE 的事件代码 在原先事件上添加 add 方法
// img.attachEvent('onclick',delRow(this));
tb.rows[row].attachEvent("on"+event,fun);
}
}
//新增列
function addCells(tb){
for (i=0;i<tb.rows.length;i++){
var td= document.createElement("td");
tb.rows[i].appendChild(td);
}
}
//批量修改单元格属性
function cellsSetAttribute(oTable,attributeName,attributeValue){
for (i=0;i<oTable.rows.length;i++){
for (j=0;j<oTable.rows[i].cells.length;j++){
oTable.rows[i].cells[j].setAttribute(attributeName,attributeValue);
}
}
}
//合并只支持单向合并
//行合并
function mergerRow(tb,row,cell,num){
for(var i= (row+1),j=0;j<(num-1);j++){
tb.rows[i].removeChild(tb.rows[i].cells[cell]);
}
tb.rows[row].cells[cell].setAttribute("rowspan",num);
// document.getElementById('c').innerHTML=document.getElementById('u').innerHTML;
}
//列合并
function mergerCell(tb,row,cell,num){
for(var i= (cell+1), j=0;j<(num-1);j++){
tb.rows[row].removeChild(tb.rows[row].cells[i]);
}
tb.rows[row].cells[cell].setAttribute("colspan",num);
// document.getElementById('c').innerHTML=document.getElementById('u').innerHTML;
}
测试DEMO
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.testclass{background-color:yellow;}
</style>
<script type="text/javascript" src="stone.js"></script>
<script type="text/javascript">
<!--
function giveText(){
for(var i=0;i<5;i++){
for(var j=0;j<5;j++){
insertText(mytable,i,j,i*5+j);
}
}
}
function addInput(){
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value","我是新增的");
toAppendChild(mytable,3,3,input);
}
function listen(){
alert('恭喜你!监听器安装成功!');
}
//-->
</script>
</head>
<body>
表格函数测试<br />
<div id="u">
</div>
<input type="button" value="新建一个5X5的表格" onclick="createTable('u',5,5,'mytable');" />  
<input type="button" value="显示表格边框" onclick="document.getElementById('mytable').setAttribute('border',1);" />  
<input type="button" value="插入文本" onclick="giveText();" />  
<input type="button" value="修改文本" onclick="updateText(mytable,3,3,'text')" />  <br />
<input type="button" value="添加子节点input" onclick="addInput();" />  
<input type="button" value="删除第5行" onclick="removeRow(mytable,4);" />  
<input type="button" value="设置单元格宽度" onclick="cellSetAttribute(mytable,0,0,'width','50')" />  
<input type="button" value="添加单元格监听器" onclick="cellAddListener(mytable,2,2,'click',listen)" />  <br />
<input type="button" value="行合并" onclick="mergerRow(mytable,2,1,2); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="列合并" onclick="mergerCell(mytable,1,2,3); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="设置单元格背景色" onclick="cellsSetAttribute(mytable,'class','testclass'); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="设置行高" onclick="rowSetAttribute(mytable,2,'height','50');" />  <br />
<input type="button" value="新增第4行监听器" onclick="rowAddListener(mytable,3,'click',listen);" />  
<input type="button" value="新增一行" onclick="insertRow(mytable);" />  
<input type="button" value="新增列" onclick="addCells(mytable);" />  
</body>
</html>
测试截图:
一组JS创建和操作表格的函数集合

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
jQuery插件之validation插件
Mar 29 jQuery
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
给Function做的OOP扩展
May 07 #Javascript
js arguments.callee的应用代码
May 07 #Javascript
javascript 有用的脚本函数
May 07 #Javascript
JavaScript的parseInt 进制问题
May 07 #Javascript
日期 时间js控件
May 07 #Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 #Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 #Javascript
You might like
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
python编写简单爬虫资料汇总
2016/03/22 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
清洁工表扬信
2014/01/08 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
南京导游词
2015/02/03 职场文书
新郎结婚保证书
2015/02/26 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Python如何配置环境变量详解
2021/05/18 Python