首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript如何创建表格(javascript绘制表格的二种方法)

Posted in Javascript onDecember 10, 2013

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始

和上面两个方法差不多的意思，就是删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row=document.getElementById("行的Id"); 
var index=row.rowIndex;//有这个属性，嘿嘿 
objTable.deleteRow(index);

在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

function clearRow(){ 
   objTable= document.getElementById("myTable");    for( var i=1; i<objTable.rows.length ; i++ ) 
   { 
   tblObj.deleteRow(i);    
      } 
}

这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：

function clearRow(){ 
   objTable= document.getElementById("myTable"); 
   var length= objTable.rows.length ; 
   for( var i=1; i<length; i++ ) 
   { 
       objTable.deleteRow(i);    
      } 
}

3、动态设置单元格与行的属性

A、采用setAttribute()方法，格式如下：setAttribute(属性，属性值)

说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：1

var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//为表格设置边框为1

其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//为单元格设置高度为24

在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

B、直接赋值

var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//为表格设置边框为1

这个方法也全部适用，呵呵。

4、创建表格

了解了行<tr>与单元格<td>的增删那就可以创建表格了。

第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

var index = objMyTable.rows.length-1; 
var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的
//单元格箱号 
var newCellCartonNo = nextRow.insertCell(); 
var cartonNoName = "IptCartonNo"; 
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>"; 
newCellCartonNo.setAttribute("className","tablerdd");

这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧~

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>蓝光-BlueShine</title> 
<script language="JavaScript"> 
var Count=false,NO=1; 
function addRow(){ 
Count=!Count; 
//添加一行 
var newTr = testTbl.insertRow(testTbl.rows.length); 
//添加两列 
var newTd0 = newTr.insertCell(); 
var newTd1 = newTr.insertCell(); 
var newTd2 = newTr.insertCell(); 
//设置列内容和属性 
if(Count){newTr.style.background="#FFE1FF";} 
else {newTr.style.background="#FFEFD5";} 
newTd0.innerHTML = '<input type=checkbox id="box4">'; 
NO++ 
newTd1.innerText="第"+ NO+"行"; 
} 
</script> 
</head>
<body> 
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" > 
<tr bgcolor="#FFEFD5"> 
<td width=6%><input type=checkbox id="box1"></td> 
<td >第1行</td> 
<td > </td> 
</tr> 
</table> 
<label> 
<input type="button" value="插入行" onclick="addRow()" /> 
</label> 
</body> 
</html>

5、appendChild()方法

<html> 
<head> 
<title>My Test Page</title> 
<script type="text/javascript"> 
<!-- 
var textNumber = 1; 
function addTextBox(form, afterElement) { 
// Increment the textbox number 
textNumber++; 
// Create the label 
var label = document.createElement("label"); 
// Create the textbox 
var textField = document.createElement("input"); 
textField.setAttribute("type","text"); 
textField.setAttribute("name","txt"+textNumber); 
textField.setAttribute("id","txt"+textNumber); 
// Add the label's text 
label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); 
// Put the textbox inside 
label.appendChild(textField); 
// Add it all to the form 
form.insertBefore(label,afterElement); 
return false; 
} 
function removeTextBox(form) { 
if (textNumber > 1) { // If there's more than one text box 
    // Remove the last one added 
    form.removeChild(document.getElementById("txt"+textNumber).parentNode); 
    textNumber--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
label { 
display:block; 
margin:.25em 0em; 
} 
--> 
</style> 
</head> 
<body> 
<form id="myForm" method="get" action="./" /> 
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label> 
<p> 
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" /> 
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" /> 
</p> 
<p><input type="Submit" value="Submit" /></p> 
</form> 
</body> 
</html>
<html> 
<head> 
<title>My Test Page</title> 
<script type="text/javascript"> 
<!-- 
var textNumber = 1; 
function addTextBox(form, afterElement) { 
// Increment the textbox number 
textNumber++; 
// Create the label 
var label = document.createElement("label"); 
// Create the textbox 
var textField = document.createElement("input"); 
textField.setAttribute("type","text"); 
textField.setAttribute("name","txt"+textNumber); 
textField.setAttribute("id","txt"+textNumber); 
// Add the label's text 
label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); 
// Put the textbox inside 
label.appendChild(textField); 
// Add it all to the form 
form.insertBefore(label,afterElement); 
return false; 
} 
function removeTextBox(form) { 
if (textNumber > 1) { // If there's more than one text box 
    // Remove the last one added 
    form.removeChild(document.getElementById("txt"+textNumber).parentNode); 
    textNumber--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
label { 
display:block; 
margin:.25em 0em; 
} 
--> 
</style> 
</head> 
<body> 
<form id="myForm" method="get" action="./" /> 
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label> 
<p> 
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" /> 
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" /> 
</p> 
<p><input type="Submit" value="Submit" /></p> 
</form> 
</body> 
</html>

javascript如何创建表格(javascript绘制表格的二种方法)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求，返回实体对象的异步调用
Mar 16 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
Sep 03 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
javascript修改表格背景色实例代码分享
Dec 10 #Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 #Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
javascript 数字格式化输出的实现代码
Dec 10 #Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 #Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 #Javascript
浅析jQuery1.8的几个小变化
Dec 10 #Javascript
GUI(2) pandas(7) agg(1) 数组(5) 音频(1) 数据处理(2) mp3Play(1) apply(1) 矩阵(1) 数据保存(1)
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
基于原生js淡入淡出函数封装（兼容IE）
2016/10/20 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
详解nodejs 文本操作模块-fs模块（一）
2016/12/22 NodeJs
Bootstrap表单制作代码
2017/03/17 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
js实现验证码干扰（静态）
2021/02/22 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python如何测试stdout输出
2020/08/10 Python
python实现马丁策略的实例详解
2021/01/15 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
ALDO美国官网：加拿大女鞋品牌
2018/12/28 全球购物
linux面试题参考答案（10）
2016/10/26 面试题
汽车驾驶求职信
2013/10/25 职场文书
测量工程专业求职信
2014/02/24 职场文书
一体化教学实施方案
2014/05/10 职场文书
企业文化演讲稿
2014/05/20 职场文书
2014年度思想工作总结
2014/11/27 职场文书