所见既所得的动态表格（html+javascript）

最新推荐文章于 2019-06-18 21:53:18 发布
最新推荐文章于 2019-06-18 21:53:18 发布
阅读量1.5k 收藏
点赞数
文章标签： javascript html function button null input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SundyQSW/article/details/58939
版权

自己写所见既所得的动态表格控件，使用比较方便，可以直接用网页编辑工具先将动态表格画出来，然后指定其中的某一行为模版行程序就可以根据模版行的内容动态的生成可编辑的表格了。目前就是对单选钮的支持有点问题（因为动态表格都是用的数组实现的，所以单选钮分组就有问题）看大家有什么好的解决办法告诉我。
以下是flexgrid.js的代码：

/**
 * 功能描述: 可编辑表格类FlexGrid
 * 属性:
 *  tableobj——表格对象（只读）
 *  objname——表格对象的名称（只读）
 *  backgroundColor——未选中时内容行的背景颜色（可写）
 *  color——未选中时内容行的前景颜色（可写）（控件的前景色在未选中的时候无法改变（因为控件在为选中行的情况下是只读属性，颜色为禁用色））
 *  selectedbackgroundColor——选中时内容行的背景颜色（可写）
 *  selectedColor——选中时内容行的前景颜色（可写）
 *  RowContentModule——模版行对象（只读）
 *  rowcount——总行数（不含表头）（只读）
 *  colcount——总列数（内容行列数）（只读）
 *  cellsmodule——模版行中单元格内容集合（HTML代码形式，cellsmodule[列索引（0开始）]——返回该列的模版内容）（只读）
 *  startrowindex——内容行开始的行索引（基于整个表格对象的（包含表头））（只读）
 *  selectedrowid——当前选中的行索引（基于整个表格对象的（包含表头），为-1时表示没有行选中）（只读）
 *方法：
 *  addnewrow()——添加新行
 *  getvalue(objname,rowindex)——返回对象值（objname对象名称，rowindex行索引（不包含表头，从0开始））
 *  setvalue(objname,rowindex，values)——设置对象值（objname对象名称，rowindex行索引（不包含表头，从0开始）,values值）
 *  selectedrow(newselectedrowid)——选定行（newselectedrowid要选择的行索引（包含表头））
 *  getobjtype(obj)——返回表单对象的类型代码（obj表单对象）
 *  deleterow()——删除选定行
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
 
 /**
 * 功能描述: 可编辑表格类构造函数
 * 输入参数: tblobj——表格对象（<table>对象)
 *   RowContentModule——模板行对象（<tr>对象）
 *    该行以上为动态表的表头，该行用于构造其它内容行，在运行时该行不存在（已被删除）
 *    目前版本的仅支持文本框、密码框、多行文本框、单选列表框、复选按钮表单对象（已测试）   
 *    对于单选按钮只支持按列分组，不支持按行分组
 *   objname——表格对象名称（字符型，表格对象的名称）   
 * 返回值：可编辑表格类FlexGrid对象
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function FlexGrid(tblobj,RowContentModule,objname)
{
 this.tableobj=tblobj;
 this.objname=objname;
 this.backgroundColor="#FFFFFF"
 this.color="#ff0000";
 this.selectedbackgroundColor="#63BADA"
 this.selectedColor="#0000ff";
 this.RowContentModule=RowContentModule;
 this.rowcount=0;
 this.colcount=RowContentModule.cells.length;
 this.cellsmodule=new Array(this.colcount);
 this.startrowindex=RowContentModule.rowIndex;
 for(i=0;i<this.colcount;i++)
 {
  this.cellsmodule[i]=RowContentModule.cells[i].innerHTML;
 }
 this.selectedrowid=-1;
 this.tableobj.deleteRow(RowContentModule.rowIndex); 
 this.addnewrow=tbl_addnewrow;
 this.getvalue=tbl_getvalue;
 this.setvalue=tbl_setvalue;
 this.selectedrow=tbl_selectedrow;
 this.getobjtype=tbl_getobjtype;
 this.deleterow=tbl_deleterow;
}

 /**
 * 功能描述: 添加新行
 * 输入参数: 无   
 * 返回值：新行的行索引（包含表头）
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_addnewrow()
{
 var row=this.tableobj.insertRow(this.startrowindex+this.rowcount);
 var rowcontent=""
 for(var i=0;i<this.cellsmodule.length;i++)
 {
  myNewCell=row.insertCell(i);  
 }
 this.selectedrow(row.rowIndex);
 this.rowcount++;
 return row.rowIndex;
}

 /**
 * 功能描述: 获取指定行中对象的值
 * 输入参数: objname——对象名称   
 *   rowindex——行索引（不包含表头，从0开始）  
 * 返回值：指定行中对象的值，无效时候返回null
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_getvalue(objname,rowindex)
{
 var obj=eval("document.all."+objname);
 if(obj==null){return null;}
 if(rowindex>=this.rowcount){return null;}
 if(this.rowcount==0){return null;}
 if(this.rowcount!=1)
 {
  obj=obj[rowindex];
 }
 var ret=null;

 switch(obj.type)
 {
  case 'button':
   ret=obj.value;
   break ;
  case 'checkbox':
   ret=obj.status;
   break ;
  case 'radio':
   ret=obj.status;
   break ;
  case 'file':
   ret=0;
   break ;
  case 'image':
   ret=0;
   break ;
  case 'password':
   ret=obj.value;
   break ;
  case 'submit':
   ret=obj.value;
   break ;
  case 'reset':
   ret=obj.value;
   break ;
  case 'text':
   ret=obj.value;
   break ;
  case 'select-multiple':
   ret= null;
   break ;
  case 'select-one':
   ret=obj.options[obj.selectedIndex].value;
   break ;
  case 'textarea':
   ret=obj.value;
   break ;
  case 'hidden':
   ret=obj.value;
   break;
  default:
   ret=null;
 }

 return ret;
}

 /**
 * 功能描述: 设置指定行中对象的值
 * 输入参数: objname——对象名称   
 *   rowindex——行索引（不包含表头，从0开始）
 *   vaules——值     
 * 返回值：成功返回true，失败返回false
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_setvalue(objname,rowindex,vaules)
{
 var obj=eval("document.all."+objname);
 if(obj==null){return null;}
 if(rowindex>=this.rowcount){return false;}
 if(this.rowcount==0){return false;}
 if(this.rowcount!=1)
 {
  obj=obj[rowindex];
 }
 switch(obj.type)
 {
  case 'button':
   return false;
  break;
  case 'checkbox':
   alert(values);
   obj.checked=values;
   return true;
  break;
  case 'radio':
   return false;
  break;
  case 'file':
   return false;
  break;
  case 'image':
   return false;
  break;
  case 'password':
   obj.value=values;
   return true;
  break;
  case 'submit':
   return false;
  break;
  case 'reset':
   return false;
  break;
  case 'text':
   obj.value=values;
   return true;
  break;
  case 'select-multiple':
   return false;
  break;
  case 'select-one':
   for(var i=0;i<obj.options.length;i++)
   {
    if(obj.options[i].value==values)
    {
     obj.selectedIndex=i;
     return true;
     break;
    }
   }
   return false;
  break;
  case 'textarea':
   obj.value=values;
  break;
  case 'hidden':
   obj.value=values;
   break;
 }

}

 /**
 * 功能描述: 返回表单对象类型
 * 输入参数: obj——表单对象   
 * 返回值：对于支持的对象返回相应的对象码，对于不支持的对象返回-1
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_getobjtype(obj)
{
 if(obj.type=='button'){return 0;}
 if(obj.type=='checkbox'){return 1;}
 if(obj.type=='file'){return 2;}
 if(obj.type=='image'){return -1;}
 if(obj.type=='password'){return 4;}
 if(obj.type=='submit'){return 5;}
 if(obj.type=='reset'){return 6;}
 if(obj.type=='text'){return 7;}
 if(obj.type=='select-multiple'){return 8;}
 if(obj.type=='select-one'){return 9;}
 if(obj.type=='textarea'){return 10;}
 if(obj.type=='hidden'){return -1;}
 return -1;
}

 /**
 * 功能描述: 选择行
 * 输入参数: newselectedrowid——要选中的行索引（包含表头）（可选的，缺省时通过鼠标时间回朔选中的行索引   
 * 返回值：无
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_selectedrow(newselectedrowid)
{
 var fromevent=false;//判断方法是通过什么途径调用的，false时为函数调用，true时为事件调用；
 if(newselectedrowid==null)
 {
  var obj=event.srcElement;
  while(obj!=null&&obj.tagName!='TR')
  {
   obj=obj.parentElement;
  }
  if(obj!=null)
  {
   newselectedrowid=obj.rowIndex;
  }
  else
  {
   return;
  }
  fromevent=true;
 }
 if(newselectedrowid<0||newselectedrowid==null){return;}
 if(this.selectedrowid==newselectedrowid&&fromevent){return;}
 var cell;
 var content;
 if(this.selectedrowid!=-1)
 {
  this.tableobj.rows[this.selectedrowid].style.backgroundColor =this.backgroundColor ;
  this.tableobj.rows[this.selectedrowid].style.color =this.color ;
  for(var i=0;i<this.tableobj.rows[this.selectedrowid].cells.length;i++)
  {
   cell=this.tableobj.rows[this.selectedrowid].cells[i];
   content=cell.children[0];
   for(var j=0;j<content.children.length;j++)
   {
    if(this.getobjtype(content.children[j])!=-1)
    {
     content.children[j].style.backgroundColor = this.backgroundColor;
     content.children[j].style.color =this.color ;
     
    }
   }
  }
 }
 if(newselectedrowid==-1){return;}
 this.tableobj.rows[newselectedrowid].style.backgroundColor = this.selectedbackgroundColor;
 this.tableobj.rows[newselectedrowid].style.color =this.selectedColor ;
 for(var i=0;i<this.tableobj.rows[newselectedrowid].cells.length;i++)
 {
  cell=this.tableobj.rows[newselectedrowid].cells[i];
  content=cell.children[0];
  for(var j=0;j<content.children.length;j++)
  {
   
   if(this.getobjtype(content.children[j])!=-1)
   {
    content.children[j].style.backgroundColor = this.selectedbackgroundColor;
    content.children[j].style.color =this.selectedColor ;
   }
  }
 }
 this.selectedrowid=newselectedrowid;
}

 /**
 * 功能描述: 删除选定的行
 * 输入参数: 无
 * 返回值：无
 * 作者：Sundy_QSW
 * 单位：www.topit.com.cn
 * 日期：2004/05/13
 */
function tbl_deleterow()
{
 if(this.selectedrowid==-1)
 {
  alert("请选择要删除的行");
  return;
 }
 var lastrow=false;
 var firstrow=false;
 if(this.selectedrowid-this.startrowindex+1==this.rowcount)//最后一行
 {
  lastrow=true;
 }
 if(this.selectedrowid==this.startrowindex)
 {
  firstrow=true;
 }
 this.tableobj.deleteRow(this.selectedrowid);
 this.rowcount--;
 if(this.rowcount==0)
 {
  this.selectedrowid=-1;
  this.selectedrow(this.selectedrowid);
  return;
 }
 if(lastrow)
 {
  this.selectedrowid--;
  this.selectedrow(this.selectedrowid);
  return;
 }
 this.selectedrow(this.selectedrowid);
}

测试页面sample.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态表格范例</title>
<!--引用动态表格库-->
<script language="JavaScript" src="flexgrid.js"></script>


<script language="JavaScript">
var grd;//定义动态表格对象
function addnewrow()//添加新行
{
 grd.addnewrow();
 
}
function getvalue()//获取指定单元格的内容
{
 rowid=document.all.sindex.value;
 objname=document.all.objnames.value;
 alert(grd.getvalue(objname,rowid));

}
function setvalue()//设置指定单元格的内容
{
 rowid=document.all.sindex.value;
 objname=document.all.objnames.value;
 values=document.all.newvalues.value;
 grd.setvalue(objname,rowid,values);
}
function delrow()//删除指定行
{
 //alert('del');
 grd.deleterow();
}
</script>
</head>

<body onLoad="grd=new FlexGrid(document.all.tsttbl,document.all.rowmodul,'grd');//实例化动态表格对象">

<table border="1" id="tsttbl"><!--动态表格对象-->
<tr >
<td colspan="7">表单对象</td>
</tr>
<tr >
<td >text</td>
<td>textarea</td>
<td>radio</td>
<td>checkbox</td>
<td>password</td>
<td>select</td>
<td>hidden</td>
</tr>
<tr >
<td >a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
</tr>
<tr id="rowmodul"><!--模版行对象-->
<td ><input name="a1" value="text"></td>
    <td><textarea name="a2">textarea</textarea></td>
 <td ><input type="radio" name="a3" value=1></td>
 <td><input type="checkbox" name="a4"></td>
 <td><input type="password" name="a5" value="password"></td>
 <td><select name="a6">
  <option value="1">值为1</option>
  <option value="2">值为2</option>
  <option value="3">值为3</option>
  <option value="4">值为4</option>
  <option value="5">值为5</option>
  </select>
 </td>
 <td><input type="hidden" name="a7" value="hidden"></td>
</tr>
<tr >
<td >1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>

行索引<input type="text" name="sindex" value="0">
对象名<input type="text" name="objnames" value="a1">
值<input type="text" name="newvalues" value="1111">
<input type="button" value="add" onClick="addnewrow()">
<input type="button" value="getvalue" onClick="getvalue()">
<input type="button" value="setvalue" onClick="setvalue()">
<input type="button" value="delrow" onClick="delrow()">
</body>
</html>

SundyQSW
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
HTML5&CSS3经典动态表格
weixin_30243533的博客
11-22 974
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" co...
JS技巧
LittleYearYear的专栏
06-25 2005
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 点击时文字消失，失去焦点时文字再出现 2.网页按钮的特殊颜色 style="background-color:rgb(235,207,22)"> 3.鼠标移入移出时颜色变化
【SQL】ROWNUM和ROWID
Just Do IT
03-22 1157
一、ROWNUM ROWNUM伪列是Oracle先查到结果集之后再加上去的一个伪列，这个伪列对符合条件的结果添加一个从1开始的序列号，并且序列号是从1开始增序排列的。 SQL> select rownum ,deptno,dname,loc from dept;       ROWNUM     DEPTNO DNAME          LOC ---------- ---------
js——单选框radio
weixin_33889245的博客
11-15 115
页面： ... &lt;tr align="right"&gt; &lt;td align="right"&gt;会员性别：&lt;/td&gt; &lt;td align="left"&gt; &lt;input type="radio&qu
在线所见即所得HTML编辑器的实现原理浅析
09-03
在线所见即所得HTML编辑器是网页开发中常用的一种组件，它允许用户直接在网页上编辑HTML内容，就像使用Word一样。实现这种编辑器的基本原理包括初始化、开启编辑功能、获取编辑器内容以及添加样式设置等多个步骤。 ...
bluRedactor:jQuery HTML5所见即所得编辑器
05-16
`bluRedactor`是一款基于jQuery的HTML5所见即所得（WYSIWYG）编辑器，由开发者bface007为BluEstuary项目专门设计和开发。这款编辑器旨在提供一个直观、高效且功能丰富的界面，让用户能够轻松创建和编辑富文本内容，...
所见即所得jQuery文本编辑器特效代码
03-20
【所见即所得jQuery文本编辑器特效代码】是一种在网页上实现类似桌面文字处理软件功能的技术，让用户在浏览器中可以直接看到编辑内容的效果，无需通过预览来确认样式。这种编辑器广泛应用于博客、论坛、CMS（内容...
22个所见即所得编辑器
07-09
所见即所得编辑器是 Web 开发中的一个重要组件，能够让用户在线编辑和处理富 Web 内容，包括格式文本、表格、图片、媒体、链接等等。下面我们将详细介绍 22 个所见即所得在线 Web 编辑器，每个编辑器都有其独特的...
jquery.mb.editIt:一个智能，简单的基于WebJavaScript所见即所得HTML编辑器
05-02
`jQuery.mb.editIt`是一个出色的JavaScript库，旨在提供一个既智能又简洁的所见即所得（WYSIWYG）编辑器解决方案。这个编辑器允许用户在网页上直接编辑HTML内容，就像在桌面文本编辑器中一样，无需了解HTML语法，...
JavaScript中radio对象的
Junefire的博客
08-21 286
列表遍历循环输出数据信息: 用三目运算符 tr += "&lt;td&gt;"+((datalist[i].datadic_status == 0) ? '有效' : '无效')+"&lt;/td&gt;";  //0 有效  1  无效 根据数据库内存储的信息，使选中的信息标记为被选中状态 //var datadic_status=parseInt(dictionary.datadic_st...
javascript动态添加删除表格及克隆表格
menjoy的专栏
12-25 935
insertRow()和deleteRow()方法： adddeltestvar n=0;function add(){n++;t1.insertRow().insertCell().innerHTML = delthis;//t1.insertRow().insertCell().innerHTML = ;}function del(){var c = document.getEle
jQuery+HTML动态表格的实现
qq_38650223的博客
06-14 4320
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
JS从后台获取数据，前台动态添加tr标签中的td标签
爱是与世界平行
07-03 1万+
功能描述： 要求从后台查询该省份的所有城市，然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息； 一、前台jsp及js源码 二、后台action 一、前台jsp及js源码 jsp:在固定的tr标签中添加一个id，通过js方法来获取该tr标签 &lt;tr id="lineDrop"&gt; &lt;!-- 在这里面动态的添加td标签。...
html动态添加input
weixin_33827590的博客
01-04 859
html动态添加input <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/199...
HTML中table动态添加行或列
热门推荐
u014744494的专栏
12-24 1万+
原文地址：http://www.cnblogs.com/badegg/articles/1334673.html function AddTableRow() { var Table = document.getElementById("tab"); //取得自定义的表对象 NewRow = Table.insertRow();
Javascript表格全选
weixin_40207820的博客
06-18 220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid gold; ...
使用javascript点击添加增加一行
Mars学IT
11-04 1万+
前几天做项目，需要用到一种自动增加一行的效果。 js-sample <!-- var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows); var name = tr

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值